Question

item1，item2，item3都是列表，我正在尝试使用每个列表包含的所有项目构建一个列表视图，这三个listview构建器将根据需要放置尽可能多的位置，可以说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

Flutter：帮助构建可滚动的ListView

1 个答案: