Flutter GridView.count布局问题：如何将矩形项改为正方形

你遇到的问题是因为给每个网格子项添加了水平Padding，导致Card的实际宽度被压缩，但childAspectRatio:1是基于GridView分配给子项的原始空间计算高度，所以高度大于宽度，呈现矩形。

修复方案 #

用GridView自带的crossAxisSpacing和mainAxisSpacing控制项之间的间距，同时将整体边距移到GridView的padding参数中，去掉子项外层的水平Padding，这样childAspectRatio:1就能正确生效：

Padding(
  padding: const EdgeInsets.symmetric(vertical: 8.0),
  child: GridView.count(
    crossAxisCount: 3,
    childAspectRatio: 1,
    // 列之间的间距，替代子项的horizontal padding
    crossAxisSpacing: 12,
    // 行之间的间距（可选，根据需求调整）
    mainAxisSpacing: 8,
    // 整体左右边距，保持和之前一致的视觉效果
    padding: const EdgeInsets.symmetric(horizontal: 6.0),
    children: categories
        .map((e) => Card(
              color: e.color,
              elevation: 2,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                  side: BorderSide(color: e.borderColor, width: 1.5)),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Center(
                  child: Text(e.name,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                          fontWeight: FontWeight.w400)),
                ),
              ),
            ))
        .toList(),
  ),
)

原理说明 #

• crossAxisSpacing：控制同一行中两个网格项之间的水平间距，避免给每个子项单独加Padding导致宽度被压缩。
• mainAxisSpacing：控制不同行之间的垂直间距，优化视觉布局。
• 将整体左右边距移到GridView的padding中，保证页面边缘的留白和之前一致，同时让每个网格项的可用空间保持宽高相等，配合childAspectRatio:1就能实现正方形效果。

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