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

【问题标题】：Flutter: Fill ListView.builder from existing list with 2 widgets per rowFlutter：从现有列表中填充 ListView.builder，每行 2 个小部件
【发布时间】：2021-07-22 08:11:46
【问题描述】：

到目前为止，我通过从 List<MyCustomWidget> customs 获取数据使我的 ListView.builder 每行显示 2 个小部件而失败了。

我的列表是这样的：

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，但它重复了所有列表，我想要类似的东西：

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

【问题讨论】：

可以使用gridView：flutter.dev/docs/cookbook/lists/grid-lists
@Gumboy 是的，谢谢兄弟的建议！它有效

标签： android flutter listview widget row

【解决方案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();
          
        }),

【讨论】：