Flutter中卡片居中及3列4行网格布局实现问题

问题分析 #

你当前代码嵌套了冗余的Row组件，且未使用合适的网格布局控件，导致卡片无法按预期居中并形成3列4行的排列效果。

解决方案 #

改用GridView.count实现3列布局，配合外层Center确保整体在页面居中，同时调整布局参数优化卡片间距与尺寸：

return Scaffold(
  body: Center(
    child: Container(
      color: Colors.red,
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      padding: const EdgeInsets.symmetric(horizontal: 16), // 可选：添加内边距避免卡片贴边
      child: GridView.count(
        crossAxisCount: 3, // 固定3列
        crossAxisSpacing: 12, // 列之间的间距
        mainAxisSpacing: 12, // 行之间的间距
        shrinkWrap: true, // 让GridView仅占用内容所需高度
        physics: const NeverScrollableScrollPhysics(), // 内容未超屏时禁用滚动
        children: List.generate(titles.length, (index) {
          return SelectGroupCard(
            context,
            title: titles[index],
            id: ids[index],
            onTap: (title, id) {
              setState(() {
                cardGroupResult = "$title $id";
              });
            },
          );
        }),
      ),
    ),
  ),
);

关键说明 #

• GridView.count：通过crossAxisCount:3直接指定3列布局，crossAxisSpacing和mainAxisSpacing控制卡片间的留白，提升视觉舒适度。
• shrinkWrap: true：让GridView自适应内容高度，配合外层Center实现整个卡片组在页面垂直居中。
• 移除冗余Row：原代码中的Row无实际布局作用，反而可能干扰居中效果，直接移除即可。
• 固定4行控制：若需严格实现4行布局，确保titles和ids的长度为12（3列×4行），若数量不足可补充占位卡片或调整布局逻辑。

如果需要调整卡片宽高比例，可添加childAspectRatio参数（如childAspectRatio: 0.9）自定义卡片尺寸。

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