Flutter中如何将3行纵向排列的组件调整为3列布局

• 期望实现的布局效果：
  
• 当前实际实现的布局效果：
  

ListView.builder(
  shrinkWrap: true,
  physics: BouncingScrollPhysics(),
  itemBuilder: (context, index) {
    final data = diseaseList[index];
    return Padding(
      padding: const EdgeInsets.only(right: 25, left: 25, bottom: 15),
      child: FittedBox(
        child: Row(
          children: [
            DiseaseCard(
              sectionName: data.diseaseName,
              image: data.image,
            ),
          ],
        ),
      ),
    );
  },
  itemCount: diseaseList.length,
)

在Flutter中要如何调整代码，才能实现和预期完全一致的布局效果？

现有代码存在3个核心问题导致布局不符合预期：

• 误用FittedBox组件，会强制子组件缩放适配父容器，直接导致卡片尺寸、排版错乱
• 选用ListView.builder默认实现单列线性布局，且每个列表项仅渲染1个卡片，无法实现双列排布
• 外层Row仅放置单个卡片，没有做双列布局逻辑

直接将原有ListView.builder替换为GridView组件即可实现双列卡片效果，优先推荐懒加载版本适配长列表场景：

GridView.builder(
  shrinkWrap: true,
  physics: const BouncingScrollPhysics(),
  // 保留原有左右25的边距
  padding: const EdgeInsets.symmetric(horizontal: 25),
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 固定每行2个卡片
    crossAxisSpacing: 15, // 两个卡片横向间距
    mainAxisSpacing: 15, // 上下行卡片纵向间距
    childAspectRatio: 0.75, // 卡片宽高比，可根据实际卡片设计微调，数值越大卡片越扁
  ),
  itemCount: diseaseList.length,
  itemBuilder: (context, index) {
    final data = diseaseList[index];
    // 移除原有的Padding、FittedBox、Row包裹，直接返回卡片组件
    return DiseaseCard(
      sectionName: data.diseaseName,
      image: data.image,
    );
  },
)

调整注意事项 #

1. 必须删除原代码中包裹卡片的FittedBox组件，避免卡片被异常缩放
2. 如果DiseaseCard内部硬编码了固定宽度，需要删除硬编码宽度，让卡片自动适配网格分配的可用宽度，避免出现布局溢出
3. 如果卡片宽高和预期不符，只需要微调childAspectRatio参数即可，不需要修改其他布局代码

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