如何在Flutter中创建带固定行数的横向紧凑滚动列表？

要实现固定行数、横向滚动的紧凑列表，Wrap组件因默认纵向换行的特性无法满足需求，这里提供两种适配方案：

方案1：用GridView实现（固定宽高比） #

这种方式无需手动拆分数据，适合item宽高比例固定的场景：

GridView.custom(
  scrollDirection: Axis.horizontal,
  padding: const EdgeInsets.all(8),
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 设置固定行数（示例为2行）
    crossAxisSpacing: 8, // 行间距
    mainAxisSpacing: 8, // 列间距
    childAspectRatio: 2.5, // 控制item宽高比，按需调整
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) {
      return Container(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
        decoration: BoxDecoration(
          color: Colors.grey[200],
          borderRadius: BorderRadius.circular(16),
        ),
        child: Center(child: Text('Item $index')),
      );
    },
    childCount: 20, // 总item数量
  ),
)

方案2：用SingleChildScrollView+Column+Wrap实现（内容自适应宽度） #

如果需要item宽度根据内容自动调整，可将数据拆分到对应行，再用Wrap横向排列：

// 示例数据
final items = List.generate(20, (i) => 'Item $i');
// 将数据拆分为两行（可按实际需求调整拆分逻辑）
final rowItems = [
  items.where((e) => items.indexOf(e) % 2 == 0).toList(),
  items.where((e) => items.indexOf(e) % 2 != 0).toList(),
];

// 布局实现
SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  padding: const EdgeInsets.all(8),
  child: SizedBox(
    height: 80, // 固定两行的总高度，按需调整
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: rowItems.map((row) {
        return Wrap(
          spacing: 8, // item横向间距
          children: row.map((item) {
            return Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
              decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: BorderRadius.circular(16),
              ),
              child: Text(item),
            );
          }).toList(),
        );
      }).toList(),
    ),
  ),
)

两种方案都能实现横向滚动、固定行数的紧凑布局，可根据实际需求选择。

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