垂直扩展ListView以扑朔迷离

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中的值放在Column中？

中

一个简化的示例：

List values = ["pear", "apple", "strawberry"];
@override
Widget build(BuildContext context) {
  List<Widget> children = [];
  Widget header = Padding(
    padding: EdgeInsets.all(10.0),
    child: Text("Title"),
  );
  Widget button = FlatButton(
    onPressed: () {
      setState(() {
        values.add("more fruit");
      });
    },
    child: Text("hungry? push me"),
  );
  // add the children now
  children.add(header);
  // this would have been the listview
  values.forEach((value) {
    children.add(ListTile(title: Text(value)));
  });
  children.add(button);
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(children: children),
    ),
  );
}

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,
                ),
                ),
              ),
            );
  }