如何实现如图所示的GridView及GridTile布局？

问题描述 #

请问如何实现如图所示的GridView布局？

现有代码如下：

class ProductListView extends StatelessWidget {
  const ProductListView({Key? key,required this.list}) : super(key: key);

  final List<Product> list;

  @override
  Widget build(BuildContext context) {

    final deviceSize = MediaQuery.of(context).size;
    return GridView.builder(
      physics: const BouncingScrollPhysics(),
      padding: EdgeInsets.only(left: deviceSize.width * 0.07,right: deviceSize.width * 0.07,),
      itemCount: 10,
      gridDelegate:  SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 0.66,
        //mainAxisExtent:  deviceSize.height * 0.2824,
        mainAxisSpacing: deviceSize.height * 0.035,
        crossAxisSpacing: deviceSize.width * 0.08
      ),

      itemBuilder: (context,index){
        return  ProductItem(
                    product: Product(id:list[index].id,
                    title: list[index].title,
                    price: list[index].price,
                    description: list[index].description,
                    category: list[index].category,
                    image: list[index].image,),
                    index: index,
        );

      },

    );
  }
}

另外，请问如何设置如图所示的GridTile？

解决方案 #

一、优化GridView布局实现 #

针对图中的双列商品列表布局，对现有代码做以下调整：

1. 修正列表长度：将itemCount从固定值10改为list.length，避免数组越界并适配真实数据长度：

   itemCount: list.length,
   

2. 补充上下内边距：现有代码仅设置了左右内边距，添加上下内边距让布局更贴合设计：

   padding: EdgeInsets.symmetric(
     horizontal: deviceSize.width * 0.07,
     vertical: deviceSize.height * 0.02,
   ),
   

3. 精准控制子项高度：如果需要固定每个商品卡片的高度，推荐启用mainAxisExtent并注释childAspectRatio，这样能更直观地控制纵向尺寸：

   gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
     crossAxisCount: 2,
     // childAspectRatio: 0.66,
     mainAxisExtent: deviceSize.height * 0.35, // 根据设计需求调整数值
     mainAxisSpacing: deviceSize.height * 0.035,
     crossAxisSpacing: deviceSize.width * 0.08
   ),
   

二、实现图中样式的GridTile #

图中的商品卡片可以通过GridTile组件构建，包含图片区域和底部信息栏，以下是ProductItem的具体实现：

class ProductItem extends StatelessWidget {
  final Product product;
  final int index;

  const ProductItem({Key? key, required this.product, required this.index}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridTile(
      // 商品图片区域，设置填充模式保证图片适配
      child: Image.network(
        product.image,
        fit: BoxFit.cover,
        width: double.infinity,
      ),
      // 底部信息栏，包含标题和价格
      footer: Container(
        color: Colors.white,
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min, // 仅占用所需空间
          children: [
            // 商品标题，超出两行自动省略
            Text(
              product.title,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w500,
              ),
            ),
            const SizedBox(height: 4),
            // 商品价格，高亮显示
            Text(
              "\$${product.price.toStringAsFixed(2)}",
              style: const TextStyle(
                fontSize: 16,
                color: Colors.orange,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Ahmed Iqbal teli