Flutter：使用条件表达式构建组件时如何避免索引越界异常？

你的问题核心是原代码的itemCount设置为元素总数，导致奇数索引时会生成空的Container行，破坏布局。调整成按行数来生成列表项即可解决，同时保证每行的两个元素（或一个元素+空占位）正确渲染：

修改后的代码 #

ListView.builder(
  // 计算总行数：向上取整，比如3个元素得2行，4个元素得2行
  itemCount: (dayTiles.length + 1) ~/ 2,
  itemBuilder: (context, rowIndex) {
    final firstTileIndex = rowIndex * 2;
    final secondTileIndex = rowIndex * 2 + 1;

    return Row(
      children: [
        // 第一个元素必存在
        Expanded(child: dayTiles[firstTileIndex]),
        // 判断第二个元素是否存在，不存在则用空Container占位
        secondTileIndex < dayTiles.length
            ? Expanded(child: dayTiles[secondTileIndex])
            : Expanded(child: Container()),
      ],
    );
  },
)

关键说明 #

1. 行数计算：(dayTiles.length + 1) ~/ 2是Dart的整数向上取整写法，确保不管元素数量是奇数还是偶数，都能得到正确的总行数。
2. 元素索引映射：每个rowIndex对应一行，通过rowIndex * 2和rowIndex * 2 + 1获取该行的两个元素索引。
3. 布局对齐：用Expanded包裹每个元素（包括空Container），让它们平分行宽，保证最后一行的单个元素和前面行的元素宽度一致，空占位也能占据对应位置，匹配你需要的效果。

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