Flutter列表视图横向滚动加换行

Question

我希望在Flutter中实现一个水平的列表视图，但是不可滚动。当水平方向上的空间用完时，我需要它继续在新行上进行。目前为止，我只做到了

 return ListView.separated(
                separatorBuilder: (BuildContext context, int index) =>
                    const Divider(),
                itemBuilder: (context, index) {
                  return ItemCard(items[index]);
                },
                scrollDirection: Axis.horizontal,
                itemCount: items.length);

- Wouter Vandenputte

---

为什么不尝试使用网格视图？ - Darish

Answer 1

在这种情况下，你应该尝试使用Flutter中的Wrap小部件。默认情况下，它会水平包裹，但如果要垂直包裹，则可以设置方向。

Wrap(
  direction: Axis.vertical,
  children: [
    MyWidget(),
    MyWidget(),
    MyWidget(),
    MyWidget(),
    MyWidget(),
  ],
),

使用行和列布局时，如果空间不足，则会出现黄色和黑色的溢出警告。但是Wrap创建一个新的相邻方向，可以满足列表视图的要求。

还有许多其他选项可供选择，您可以在这里进行查看：这里。

- Aditya Harshey

Answer 2

设置Listview.separated中的属性physics，使得ListView不可滚动。同时，您需要设置ItemCard()小部件的宽度。

return ListView.separated(physics: NeverScrollablePhysics(),

                separatorBuilder: (BuildContext context, int index) =>
                    const Divider(),
                itemBuilder: (context, index) {
                  return Container(
                    width: //your width size,
                    ItemCard(items[index])
                   );
                },
                scrollDirection: Axis.horizontal,
                itemCount: items.length);

- Balaji