Flutter：帮助构建可滚动的 ListView

Question

item1、item2、item3 都是列表，我正在尝试构建一个列表视图，其中包含每个列表包含的所有项目，所有这三个列表视图构建器将根据需要占据尽可能多的位置，假设 item1 有 20其中的项目将占用 20 行，而 item2 有 25 行等。当我尝试使用一行和 listview.builder 时，它给了我一个错误。 我正在尝试做的事情：

body: Container(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                ListView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                      title: Text(widget.item1[index]),
                    );
                  },
                  itemCount: widget.item1 == null ? 0 : widget.item1.length,
                ),
              ],
            ),
          ],
        ),
      ),

在大量崩溃报告中：

flutter: Another exception was thrown: NoSuchMethodError: The method '<=' was called on null.
flutter: Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.

问题是我知道的唯一方法是使用Expanded 来制作它，它会将屏幕分成三部分并形成相等的空间，或者我可以使用 flex 进行操作，但这不是我想要的。

body: Container(
        child: Column(
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(widget.item1[index]),
                  );
                },
                itemCount: widget.item1 == null ? 0 : widget.item1.length,
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(widget.item2[index]),
                  );
                },
                itemCount: widget.item2 == null ? 0 : widget.item2.length,
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(widget.item3[index]),
                  );
                },
                itemCount: widget.item3 == null ? 0 : widget.item3.length,
              ),
            ),
          ],
        ),
      ),

Answer 1

这就是我所说的，List 使用 SingleChildScrollView 和 Column，你也可以使用 Slivers 做同样的事情

我为您制作的样品：

 final List<String> item1 = List.generate(5, (val) => "item1 $val");
  final List<String> item2 = List.generate(5, (val) => "item2 $val");
  final List<String> item3 = List.generate(5, (val) => "item3 $val");

  @override
  Widget build(BuildContext context) {
    final items = <Widget>[];

    for (String i1 in item1) {
      items.add(ListTile(
        title: Text(i1),
      ));
    }

    for (String i2 in item2) {
      items.add(ListTile(
        title: Text(
          i2,
          style: TextStyle(
            color: Colors.red,
          ),
        ),
      ));
    }

    for (String i3 in item3) {
      items.add(ListTile(
        title: Text(
          i3,
          style: TextStyle(
            color: Colors.blue,
          ),
        ),
      ));
    }

    return Scaffold(
      body: Container(
        child: SingleChildScrollView(
          child: Column(
            children: items,
          ),
        ),
      ),
    );
  }
}

使用ListView.builder 的另一种方式：

 return Scaffold(
      body: Container(
        child: SingleChildScrollView(
          child: Column(
            children: [
              ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(item1[index]),
                  );
                },
                itemCount: item1.length,
              ),
              ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(
                      item2[index],
                      style: TextStyle(
                        color: Colors.red,
                      ),
                    ),
                  );
                },
                itemCount: item2.length,
              ),
              ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(item3[index]),
                  );
                },
                itemCount: item3.length,
              ),
            ],
          ),
        ),
      ),
    );
  }

不要忘记查看 Emily Fortuna（Flutter 团队）关于 Slivers 的精彩文章

https://medium.com/flutter/slivers-demystified-6ff68ab0296f