如何将两个 ListView 放在一个列中？答案

【问题标题】：How to put two ListView in a column?如何将两个 ListView 放在一个列中？
【发布时间】：2017-11-26 16:55:19
【问题描述】：

我有两个带有 ExpansionTiles 的 ListView，我想将它们一个接一个地放在一个列中，该列中首先包含一些其他小部件。这是我的代码，

 @override
 Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
    appBar: new AppBar(
        title: new Text("Project Details"),
        backgroundColor: Colors.blue[800]),
    body:

    new Padding(padding: new EdgeInsets.all(10.0),
      child: new Column(children: <Widget>[
        new Text(project.name, style: new TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.blue[700],
            fontSize: 15.0
        )),
        new RowMaker("District", project.district),
        new RowMaker("River", project.river),
        new RowMaker("Tac Approved", project.tacApproved),
        new RowMaker("Func Sanctioned", project.fundSanctioned),
        new Row(children: <Widget>[
          new FlatButton(onPressed: null,
            color: Colors.blue,
            child: new Text("Gallery"),
            textColor: Colors.white,),
          new FlatButton(onPressed: null,
              color: Colors.blue,
              child: new Text("Upload Images"),
              textColor: Colors.white),
          new FlatButton(
              onPressed: null,
              color: Colors.blue,
              child: new Text("Update"),
              textColor: Colors.white),
        ],),
        new ListView(children: getSfListTiles()),
        new ListView(children: getWorkStatementTiles())


    ]
        ,
      )
      ,
    )
);

}

使用这个，小部件主体显示空白。如果我将 ListView 直接设置为主体，它们显示得很好。我错过了什么吗？

【问题讨论】：

标签： flutter

【解决方案1】：

尝试将您的ListView 包裹在Expanded 中。它没有固有的高度，所以你需要给它一个。

【讨论】：

我怎样才能将整个身体包裹在 Scrollview 中？
您可能应该将其作为一个单独的问题提出；这取决于你有多少内容。如果很多，考虑一个CustomScrollView，如果不是很多，SingleChildScrollView并将ListView更改为Column。
使用 CustomScrollView 或 SingleChildScrollView 会为子小部件提供带有大文本的黑色背景。
我正在寻找的解决方案是两个 ListView （包含 ExpansionTile ）在不展开时只占用所需的空间，但在展开时它应该伸展到最大高度，我在这里遇到的问题是扩展内的两个 ListView 占用了整个空间均分，扩展时，它们在该区域内扩展。
使用 CustomScrollView 的解决方案，gist.github.com/karanvs/44599464f72988b138f5bc783f423b07

【解决方案2】：

您需要提供限制高度才能将ListView 放入Column 中。有很多方法，我在这里列出几个。

两个列表都使用Expanded

Column(
  children: <Widget>[
    Expanded(child: _list1()),
    Expanded(child: _list2()),
  ],
)

给一个Expanded和另一个SizedBox

Column(
  children: <Widget>[
    Expanded(child: _list1()),
    SizedBox(height: 200, child: _list2()),
  ],
)

两者都使用SizedBox。

Column(
  children: <Widget>[
    SizedBox(height: 200, child: _list1()),
    SizedBox(height: 200, child: _list2()),
  ],
)

使用Flexible，你可以改变其中的flex属性，就像Expanded一样

Column(
  children: <Widget>[
    Flexible(child: _list1()),
    Flexible(child: _list2()),
  ],
)

如果您的 ListView 足够短，可以放入 Column，请使用
```
ListView(shrinkWrap: true)
```

【讨论】：

【解决方案3】：

将ListView 包装成固定大小的Container 对我有用。

【讨论】：

【解决方案4】：

检查链接而不是 listview 使用 sliverlist 以获得更好的性能

Tuturial 和 full Example

 return CustomScrollView(
            slivers: [
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) => Container(
                      height: 100,
                      color: Colors.red,
                      child: Text("List 1 item${index}")),
                  childCount: 5,
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) => Container(
                      height: 100,
                      color: Colors.blue,
                      child: Text("List 2 item${index}")),
                  childCount: 5,
                ),
              ),
            ],
          );

【讨论】：