Flutter GridView实现图文卡片 统一图片尺寸及文字布局方案

问题说明 #

正在实现书籍列表页面，目标效果与实际运行效果对比如下：

• 目标页面参考截图
• 实际运行效果截图

当前实现代码如下：

SingleChildScrollView(
          child: Column(
      children: [
        Center(
          child: Container(
            margin: EdgeInsets.all(20),
            width: 230,
            height: 40,
            child: ElevatedButton(
              onPressed: () {

              },
              style: ButtonStyle(
                backgroundColor:
                MaterialStateProperty.all<Color>(Color(0xff28CC61)),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ),
              child: const Padding(
                padding: EdgeInsets.all(8.0),
                child: Text("Add a book", style: TextStyle(
                  fontSize: 20
                ),),
              ),
            ),
          ),
        ),
        Container(
          child: Text("Explore between 10 books", style: TextStyle(
            fontSize: 20
          ),),
        ),
        Container(
          //adding: EdgeInsets.all(12),
          child: SingleChildScrollView(
            child: GridView.builder(
              shrinkWrap: true,
                physics: BouncingScrollPhysics(),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    childAspectRatio: 1,
                    crossAxisSpacing: 20,
                    crossAxisCount: 2,
                    mainAxisSpacing: 8),
                itemCount: books.length,


                itemBuilder: (BuildContext ctx, index) {



                  return Container(
                    width: 50,
                    height: 100,
                    child: Card(

                      color: Color(0xFFEDEDED),
                      child: Column(

                        children: [


                          Image.asset(books[index].image, height: 150
                            ,
                            width: 150,fit: BoxFit.cover,),

                        ],


                      ),
                    ),
                  );
                }),
          ),
        ),


      ],
    ),
  ),

暂不考虑颜色和样式调整，目前使用GridView时存在两个问题：

• 不知道如何在卡片内图片下方添加文字
• 无法让所有卡片内的图片保持统一尺寸，查阅GridView官方文档未找到对应解决方案

修复方案 #

两个问题的核心原因和修改方法如下：

1. 图片下方加文字：现有Card的Column children数组中仅放入了Image组件，直接在Image组件后追加Text组件即可实现文字在图片下方排列。
2. 图片尺寸统一：现有代码给Image硬编码了150的宽高，同时GridView的childAspectRatio设置为1（正方形比例），但卡片需要同时容纳图片+文字，正方形高度不足会导致布局溢出、图片缩放异常。需要移除Image的硬编码宽高，用Expanded组件包裹Image让其自动填充卡片内除文字外的剩余空间，同时调整childAspectRatio为适配图文布局的比例（推荐设为0.7，可根据实际素材微调）。

修改后可正常运行的完整代码：

SingleChildScrollView(
  child: Column(
    children: [
      Center(
        child: Container(
          margin: EdgeInsets.all(20),
          width: 230,
          height: 40,
          child: ElevatedButton(
            onPressed: () {},
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.all<Color>(Color(0xff28CC61)),
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
              ),
            ),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "Add a book",
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
      ),
      Container(
        child: Text(
          "Explore between 10 books",
          style: TextStyle(fontSize: 20),
        ),
      ),
      // 移除多余的SingleChildScrollView，GridView本身可滚动，嵌套会导致滚动冲突
      Padding(
        padding: EdgeInsets.all(12),
        child: GridView.builder(
            shrinkWrap: true,
            physics: BouncingScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                // 调整宽高比适配图片+文字布局，避免溢出
                childAspectRatio: 0.7,
                crossAxisSpacing: 20,
                crossAxisCount: 2,
                mainAxisSpacing: 8),
            itemCount: books.length,
            itemBuilder: (BuildContext ctx, index) {
              return Card(
                color: Color(0xFFEDEDED),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    // 用Expanded包裹图片，自动占满剩余空间，保证所有图片尺寸统一
                    Expanded(
                      child: Image.asset(
                        books[index].image,
                        fit: BoxFit.cover,
                      ),
                    ),
                    // 图片下方追加文字区域，可根据需求调整padding、样式
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        books[index].title, // 替换为你的书籍标题字段
                        textAlign: TextAlign.center,
                      ),
                    )
                  ],
                ),
              );
            }),
      ),
    ],
  ),
)

额外优化点：原代码在Column里嵌套了一层多余的SingleChildScrollView包裹GridView，两个滚动组件嵌套会引发滚动冲突，已直接移除，给GridView外层加Padding即可实现原来的边距效果。原代码中包裹Card的Container设置的固定宽高不会生效，GridView子元素布局由gridDelegate统一控制，已同步移除该冗余Container。

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