Flutter Horizontal ListView 在下方添加行而不是无限滚动

Question

该应用程序的目的是显示用户必须 select 的许多按钮。不幸的是，无限滚动在这里不是一个用户友好的工具，最好不要让用户进行不必要的操作。

因此，我需要水平 ListView 在一个屏幕内并在下方展开，添加新行。我已经尝试添加一个 SizedBox，但 ListView 行仍然是无限的并且离开了屏幕。

return new Scaffold(
  appBar: AppBar(
    title: Text("Test"),
  ),
  body: SizedBox(
      width: 300.0,
      child: ListView(
              scrollDirection: Axis.horizontal,
              children: _rowWidgets.toList() // these are just IconButtons
             ),
          )
      );

项目的数量可能会有所不同，我无法在所有屏幕上一致地将列表划分为子列表。

Answer 1

您似乎需要 Wrap 小部件。当然，widget 没有像 ListView 那样的水平滚动。所以你必须提供垂直滚动来显示很多按钮。

return Scaffold(
          appBar: AppBar(
              title: Text("Test"),
          ),
          body: Center(
              child: Container(
                  padding: EdgeInsets.all(16.0),
                  color: Colors.green,
                  width: 300.0,
                  child: Wrap(
                      spacing: 8.0, // gap between adjacent chips
                      runSpacing: 4.0, // gap between lines
                      children: List.generate(9, (i) => item(i.toString())).toList()
                  ),
              ),
          )
      );

Flutter Horizontal ListView 在下方添加行而不是无限滚动

Flutter Horizontal ListView add lines under instead of infinite scroll

flutter

flutter-layout

Flutter Horizo​​ntal ListView 在下方添加行而不是无限滚动

Flutter Horizontal ListView add lines under instead of infinite scroll

flutter

flutter-layout

Flutter Horizontal ListView 在下方添加行而不是无限滚动