Question

我有一个下拉菜单，允许用户选择多个选项。选择一个选项时，它会添加到列表中。我需要显示该列表，并在将项目添加到列表时使其垂直扩展。

final List<String> _selectedValues = <String>[];

onChanged操作：

  onChanged: (String newValue) {
    setState(() {
      if (_selectedValues.contains(newValue))
        _selectedValues.remove(newValue);
      else
        _selectedValues.add(newValue);
    });
  },

这就是我生成具有固定高度并滚动的列表的方式。我不希望它滚动，理想情况下它会增长并按下按钮：

 Widget _selectedValuesList() {
    return _selectedValues.isEmpty
        ? Center(child: Text('Empty'))
        : ListView.builder(
            itemCount: _selectedValues.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(_selectedValues[index]),
              );
            },
          );
  }


  body: Form(
    key: _formKey,
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24.0),
      child: Column(
        children: <Widget>[
          TextFormField(
            ...
          ),
          _categoryDropdown(),
          TextFormField(
           ...
          ),
          _valuesDropdown(),

//This is where I include the list
//********************************
          Expanded(
            child: _selectedValuesList(),
          ),
//********************************
          _showErrorMessage(),
          Container(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            alignment: Alignment.center,
            child: SizedBox(
              width: double.infinity,
              child: RaisedButton(
               ...,
                ),
                child: Text(
                  _buttonText,
                  style: ...,
                ),
                onPressed: () async {
                 ...
                },
              ),
            ),
          ),
        ],
      ),
    ),
  ),

Answer 1

这是一个有趣的问题。如果不是动态地创建该列的所有子级，而不是在您的ListView中放入Column，该怎么办：只需将原本在ListView中的值放在{{1 }}代替？

一个简化的示例：

Column

Answer 2

垂直扩展列表视图-

    @override
      Widget build(BuildContext context) {
        return new Scaffold(

         body: 
               ListView.builder(
                    itemBuilder: (context, index) {
                      return Padding(
                          padding: EdgeInsets.only(top: 0.0),
                          child: new ExpansionTile(
                          initiallyExpanded: false,
                          title: new Text(
                            _allSlots[index].title,
                            style: new TextStyle(
                                fontSize: 16.0,
                                fontWeight: FontWeight.bold,
                                fontStyle: FontStyle.normal),
                          ),
                          children: <Widget>[
                            GridView.count(
                              childAspectRatio: 4.0,
                              crossAxisCount: 2,

                              padding: EdgeInsets.all(5.0),
                              children: <Widget>[
                                _getItemTimeUI(context, 0),
                                _getItemTimeUI(context, 1),
                                _getItemTimeUI(context, 2),
                              ],
                              shrinkWrap: true,
                              // todo comment this out and check the result
                              physics: ClampingScrollPhysics(),
                            ),
                        ]),);
                    },
                    itemCount: _allSlots.length,
                    shrinkWrap: true,
                    // todo comment this out and check the result
                    physics:
                        ClampingScrollPhysics(), // todo comment this out and check the result
                  ),
               }

        );
  }



    Widget _getItemTimeUI(BuildContext context, int index) {
        return Container(
            margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
            child: InkWell(
              child: Text(
                '10:00 AM - 12:00 PM',
                style: new TextStyle(
                  color: Colors.black87,
                  fontSize: 14.0,
                  fontWeight: FontWeight.normal,
                ),
                ),
              ),

            );

  }

在Flutter中垂直展开ListView

2 个答案: