Flutter中如何创建内容自适应宽度的固定行列网格视图？

问题分析 #

你需要的是每行固定3个条目、整行首尾对齐、每个条目宽度随内容自适应的布局，而flutter_staggered_grid_view包主要用于高度自适应的瀑布流场景，无法满足宽度自适应且每行固定数量的需求，因此需要换一种实现方式。

解决方案：手动分组+Row布局 #

核心思路是将分类列表按每3个元素为一组拆分，每组用Row承载，通过Row的mainAxisAlignment: MainAxisAlignment.spaceBetween实现整行首尾对齐，每个条目宽度由自身内容自动决定。

1. 编写列表分组工具方法

先实现一个将列表拆分为每3个元素一组的方法：

List<List<String>> splitCategories(List<String> categories) {
  List<List<String>> groupedList = [];
  for (int i = 0; i < categories.length; i += 3) {
    int endIndex = i + 3 > categories.length ? categories.length : i + 3;
    groupedList.add(categories.sublist(i, endIndex));
  }
  return groupedList;
}

2. 构建布局

在页面中使用分组后的列表构建布局：

Column(
  children: splitCategories(categories).map((group) {
    return Padding(
      // 设置行与行之间的间距，和你之前的mainAxisSpacing一致
      padding: EdgeInsets.only(bottom: 2 * Responsive().heightConfig),
      child: Row(
        // 实现首尾对齐，剩余空间均匀分配在条目之间
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: group.map((categoryText) {
          return CategoryCard(text: categoryText);
        }).toList(),
      ),
    );
  }).toList(),
)

3. 保持CategoryCard原有逻辑

你的CategoryCard代码无需修改，它的宽度会自动根据内部文本内容自适应，配合Row的布局即可达到需求效果。

补充说明 #

• 如果最后一组不足3个条目，MainAxisAlignment.spaceBetween会让现有条目自动分散对齐，保持整行首尾与其他行一致；
• 若需要最后一组左对齐，可将MainAxisAlignment.spaceBetween改为MainAxisAlignment.start，同时给每个CategoryCard添加固定的水平间距。

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