flutter 如何创建1行2列的UI?

jhiyze9q  于 2023-05-19  发布在  Flutter
关注(0)|答案(1)|浏览(198)

以上是我计划实现的(1行2个产品)。然而,我下面的代码给了我想要的,但有重复的数据。

for (var i = 0; i < containers.length - 1; i++) {
      var row = Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          containers[i],
          containers[i + 1],
        ],
      );
      rows.add(row);
    }

下面是我在Widget build中调用该方法的方式:

child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  ...displayProducts(),
                ],
              ),

上面代码的问题是,它在for loop中生成duplicated data。如何使用unique data生成相同的UI?

e1xvtsh3

e1xvtsh31#

只需使用GridView进行这种布局,并将数据列表传递给它即可
https://api.flutter.dev/flutter/widgets/GridView-class.html
如果不知道数据的长度,请使用GridView.builder构造函数。

相关问题