Flutter：从现有列表中填充 ListView.builder，每行 2 个小部件

Question

到目前为止，我尝试了很多，但失败了，因为我的 ListView.builder 通过从 List<MyCustomWidget> customs.

中获取数据，每行显示 2 个小部件

我的 List 就像：

Class CustomWidgetData extends changeNotifier {
  List<CustomWidget> customs = [
    CustomWidget(
      icon: Icons.add,
      iconColor: Colors.green,
    ),
  ];
}

我的ListView.builder就像：

class CustomWidgetListBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<CustomWidgetData>(
      builder: (context, customWidgetData, child) {
        return Expanded(
          child: ListView.builder(
            itemBuilder: (context, index){
              final customWidget = customWidgetData.customs[index];
              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                Expanded(
                  child: CustomWidget(
                    icon:customWidget.icon,
                    iconColor: customWidget.iconColor,
                  ),//CustomWidget
                ),//Expanded
                ],
              );//Row
            },
            itemCount: customWidgetData.customs.lenght,
          ), //ListView.builder
        ); //Expanded
      },
    );//Consumer
  }
}

How I want it to look

How it looks

在第一张图片中，我只在 ListView.builder 的行内添加了其他 Expanded->CustomWidget，但它重复了所有列表，我想要 smth 之类的:

1|2
3|4
5|6
...

Answer 1

Listview 不是最适合此用例的。还有另一个名为 GridView 的小部件，它可以生成您想要的网格。

GridView.builder(
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200,
            childAspectRatio: 3 / 2,
            crossAxisSpacing: 20,
            mainAxisSpacing: 20),
        itemCount: customWidgetData.customs.length,
        itemBuilder: (BuildContext context,int index) {
          return Container();
          
        }),

Flutter：从现有列表中填充 ListView.builder，每行 2 个小部件

Flutter: Fill ListView.builder from existing list with 2 widgets per row

android

listview

row

widget

flutter