Flutter折叠屏设备中Grid Item高度异常问题求助

我通过以下代码实现分类网格展示，在普通屏幕上显示正常，但在折叠大屏设备中，网格项的高度意外被拉长。尝试为SubCategoryItem包裹固定高度的Container或SizedBox（如设置height为50），但完全无效，恳请帮忙排查原因！

原实现代码 #

Widget _buildSubcategoryContainer(List<ProductCategory> categories){
  if (categories.isEmpty){
    return const SizedBox();
  }
  return Container(
    margin: const EdgeInsets.only(left: 10, right: 10),
    padding: const EdgeInsets.only(top: 5, bottom: 5),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(10),
      boxShadow: const [ Global.slightShadow ],
    ),
    child: GridView.builder(
      shrinkWrap: true,
      itemCount: categories.length,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 5),
      itemBuilder: (BuildContext context, int index) => _buildSubCategoryItem(categories[index]),
    ),
  );
}

Widget _buildSubCategoryItem(ProductCategory category){
  String defaultCategoryImage = category.image == null || category.image!.isEmpty ? "https://world-street.oss-cn-beijing.aliyuncs.com/ICON/%E4%B8%87%E8%AF%AF.png" : category.image!;
  return GestureDetector(
    onTap: () { RouteUtils.showFromRight(SearchProductResultPage(category: category)); },
    child: Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        CachedNetworkImage(imageUrl: defaultCategoryImage, width: 40, height: 40),
        const SizedBox(height: 3,),
        Text(category.name, style: const TextStyle(fontSize: 12)),
      ]
    )
  );
}

修改后的尝试代码 #

Widget _buildSubCategoryItem(ProductCategory category){
  String defaultCategoryImage = category.image == null || category.image!.isEmpty ? "https://world-street.oss-cn-beijing.aliyuncs.com/ICON/%E4%B8%87%E8%AF%AF.png" : category.image!;
  return Container(
    height: 50,
    color: Colors.blue,
    child: GestureDetector(
      onTap: () { RouteUtils.showFromRight(SearchProductResultPage(category: category)); },
      child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CachedNetworkImage(imageUrl: defaultCategoryImage, width: 40, height: 40),
            const SizedBox(height: 3,),
            Text(category.name, style: const TextStyle(fontSize: 12)),
          ]
      ),
    )
  );
}

效果对比 #

• 普通屏幕效果：
  
• 折叠屏效果：
  

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