如何在Flutter中使用GridView.builder构建分类网格？

需求说明 #

已有单个分类卡片的布局代码，同时拥有包含24个分类名称的列表name，对应本地图片命名为cat1.png至cat24.png，需要将这些卡片以网格形式展示。

实现步骤与完整代码 #

1. 准备数据 #

确保分类名称列表正确定义：

List<String> name = ["Neurology", "Dentist", "Eye", "Ear", ...]; // 补充完整24个分类名称

2. 用GridView.builder构建网格 #

将原有单卡片组件整合到网格布局中，动态绑定每个分类的名称和图片：

GridView.builder(
  padding: const EdgeInsets.all(10),
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // 每行显示3个卡片
    crossAxisSpacing: 10, // 卡片水平间距
    mainAxisSpacing: 10, // 卡片垂直间距
    childAspectRatio: 0.8, // 调整卡片宽高比适配布局
  ),
  itemCount: name.length, // 总卡片数量
  itemBuilder: (context, index) {
    return InkWell(
      onTap: () {
        // 此处添加卡片点击后的逻辑，比如跳转对应分类页面
      },
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: MyTheme.creamColor,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              margin: const EdgeInsets.only(top: 15),
              // 动态拼接图片路径，索引从0开始，图片编号取index+1
              child: Image.asset("assets/images/cat${index+1}.png"),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(name[index]),
            )
          ],
        ),
      ),
    );
  },
)

关键说明 #

• gridDelegate：通过SliverGridDelegateWithFixedCrossAxisCount控制网格列数、间距和卡片比例，保证布局整齐统一。
• itemBuilder：根据列表索引动态生成每个卡片，图片路径通过index+1拼接（适配图片命名从cat1开始的规则），分类名称直接取对应索引的列表值。
• 保留了原卡片的点击交互、圆角背景等样式，确保视觉风格一致。

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