Flutter中如何实现1行2列UI并避免数据重复？

你的循环代码出现数据重复的原因是每次循环只将索引i递增1，导致相邻行的第二个元素会被下一行重复使用（比如第1行取索引0、1，第2行取1、2，索引1的元素就重复显示了）。

方法一：修改循环步长（手动构建行） #

将循环的步长改为2，同时处理元素总数为奇数的情况（避免数组越界），修改后的代码如下：

List<Widget> displayProducts() {
  List<Widget> rows = [];
  for (var i = 0; i < containers.length; i += 2) {
    // 初始化当前行的子组件列表，先加入第一个元素
    List<Widget> rowItems = [containers[i]];
    // 检查是否存在第二个元素，避免数组越界
    if (i + 1 < containers.length) {
      rowItems.add(containers[i + 1]);
    }
    rows.add(
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: rowItems,
      ),
    );
  }
  return rows;
}

这段代码的逻辑：

• 循环变量i从0开始，每次递增2，确保每一行的起始索引不重复
• 针对元素总数为奇数的情况，最后一行只会显示单个元素，不会报错
• 所有元素只会被添加一次，完全避免重复

方法二：使用GridView（更简洁的官方方案） #

Flutter内置的GridView组件可以直接实现一行多列的布局，无需手动构建循环，代码更简洁且无重复问题：

GridView.count(
  // 设置一行显示2个元素
  crossAxisCount: 2,
  // 垂直方向（行与行）的间距
  mainAxisSpacing: 10.0,
  // 水平方向（元素之间）的间距
  crossAxisSpacing: 10.0,
  // 整体内边距
  padding: EdgeInsets.symmetric(horizontal: 10.0),
  // 传入产品组件列表
  children: containers,
)

如果需要将GridView放在Column中，需要嵌套Expanded或SingleChildScrollView来处理布局约束：

child: Column(
  children: [
    Expanded(
      child: GridView.count(
        crossAxisCount: 2,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        padding: EdgeInsets.symmetric(horizontal: 10.0),
        children: containers,
      ),
    ),
  ],
)

内容的提问来源于stack exchange，提问作者JohnDoe123