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



到目前为止,我已经尝试过,但失败得很厉害,因为我的ListView.builder通过从List<MyCustomWidget> customs获取数据,每行显示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
  }
}

我希望它看起来怎么样

的外观

在第一张图片中,我只添加了其他扩展的->CustomWidget位于我的ListView.builder的行中,但它重复了所有列表,我想要类似的smth

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

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();
          
        }),

最新更新