Flutter GridView.builder如何实现对称网格布局？

问题说明 #

使用GridView.builder构建商品目录时，出现布局不对称、排版混乱的问题，需要调整为整齐的对称布局：

• 当前布局效果：
  
• 目标布局效果：
  

原实现代码：

Widget buildCatalog(List<Product> product) => GridView.builder(
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 300,
            childAspectRatio: 3 / 5,
            crossAxisSpacing: 5,
            mainAxisSpacing: 10),
        itemCount: product.length,
        itemBuilder: (context, index) {
          final productItem = product[index];
          final media = product[index].media?.map((e) => e.toJson()).toList();
          final photo = media?[0]['links']['local']['thumbnails']['350'];
          return Container(
            padding: EdgeInsets.only(left: 15, right: 15, top: 10),
            margin: EdgeInsets.symmetric(vertical: 8, horizontal: 10),
            decoration: BoxDecoration(color: Colors.white,
            borderRadius: BorderRadius.circular(20)),
            child: Column(
                children: <Widget>[
                  InkWell(
                    child: Container(
                      margin: EdgeInsets.all(8),
                      child:
                      // Image.network(productItem.media),
                      Image.network(media != null ? 'https://cdn.yiwumart.org/${photo}' : 'https://yiwumart.org/images/shop/products/no-image-ru.jpg'),
                    ),
                  ),
                  SizedBox(height: 10,),
              Text(productItem.name, textAlign: TextAlign.center, style: TextStyle(fontSize: 20),),
                  Container(
                    width: MediaQuery.of(context).size.width * 0.8,
                      child: ElevatedButton(onPressed: () {}, child: Text('5000 тг')))
                ],
              ),
          );
        },
      );

问题分析与修复方案 #

布局混乱的核心原因：

• 采用SliverGridDelegateWithMaxCrossAxisExtent固定最大列宽，不同屏幕宽度下列宽不一致，导致布局不对称；
• 图片未设置固定尺寸，不同图片高度差异破坏对齐；
• 按钮使用屏幕宽度比例设置宽度，超出网格项范围；
• 商品名称未限制行数，长文本导致子项高度参差不齐。

修复后的代码：

Widget buildCatalog(List<Product> product) => GridView.builder(
        // 改用固定列数的网格代理，保证对称布局
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, // 固定2列，匹配目标布局
          childAspectRatio: 3 / 5, // 保留原比例
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
        itemCount: product.length,
        padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8), // 网格整体加内边距，替代子项margin
        itemBuilder: (context, index) {
          final productItem = product[index];
          final media = product[index].media?.map((e) => e.toJson()).toList();
          final photo = media?[0]['links']['local']['thumbnails']['350'];
          return Container(
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(20),
            ),
            child: Column(
              children: <Widget>[
                // 固定图片尺寸，保证所有商品图片高度一致
                InkWell(
                  child: Container(
                    width: double.infinity,
                    height: 180,
                    margin: EdgeInsets.only(bottom: 8),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12),
                      child: Image.network(
                        media != null ? 'https://cdn.yiwumart.org/${photo}' : 'https://yiwumart.org/images/shop/products/no-image-ru.jpg',
                        fit: BoxFit.cover, // 图片填充容器，避免变形
                      ),
                    ),
                  ),
                ),
                // 限制商品名称行数，避免高度不一致
                Expanded(
                  child: Text(
                    productItem.name,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 16),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                SizedBox(height: 8),
                // 按钮占满网格项宽度，适配父容器
                ElevatedButton(
                  onPressed: () {},
                  child: Text('5000 тг'),
                  style: ElevatedButton.styleFrom(
                    minimumSize: Size(double.infinity, 40),
                  ),
                ),
              ],
            ),
          );
        },
      );

核心优化点 #

• 替换网格代理为SliverGridDelegateWithFixedCrossAxisCount，固定列数确保布局对称；
• 给图片设置固定高度并使用BoxFit.cover，统一图片显示尺寸；
• 商品名称限制行数，避免长文本导致子项高度差异；
• 按钮使用父容器宽度，不再依赖屏幕宽度比例；
• 统一网格整体的内边距和子项间距，优化排版整洁度。

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