Flutter中GridView.count无法滚动，用Expanded包裹后发布模式报错

问题描述 #

使用GridView.count时无法滚动，将外层Column用Expanded包裹后滚动恢复，但发布模式下出现底部溢出178像素的错误，同时显示灰色窗口。

问题原因 #

1. 外层布局空间分配错误：初始外层Column未给包含GridView的区域分配剩余屏幕空间，导致GridView无法获取滚动所需的足够空间。
2. 固定高度触发溢出：灰色背景Container被设置为height: MediaQuery.of(context).size.height，加上上方的buildStroies和searchAndFilterBox组件，整体高度超出屏幕可用空间，引发RenderFlex溢出。
3. GridView参数冲突：同时设置shrinkWrap: true与被Expanded包裹，搭配physics: ScrollPhysics()限制了正常滚动逻辑，导致滚动行为异常。

修复方案 #

1. 在外层Column中，将包含GridView的灰色Container用Expanded包裹，让其自动占据屏幕剩余空间。
2. 移除灰色Container的固定height属性，避免强制占用全屏高度。
3. 调整GridView.count参数：
   • 移除shrinkWrap: true，让GridView利用Expanded分配的空间。
   • 将physics改为AlwaysScrollableScrollPhysics()（或直接移除，使用默认滚动物理效果）。
   • 移除primary: false，保持默认主滚动视图设置。

修复后的完整代码 #

import 'package:doctor_yab/app/theme/AppColors.dart';
import 'package:flutter/material.dart';

import 'package:get/get.dart';

import '../../../components/buildStroy.dart';
import '../../../components/searchAndFilterBox.dart';
import '../../../routes/app_pages.dart';
import '../../home/controllers/tab_home_main_controller.dart';

class NavigationBarNewF extends GetView<TabHomeMainController> {
  const NavigationBarNewF({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: [
              buildStroies(controller: controller),
              Container(),
            ],
          ),
          searchAndFilterBox(
            name: 'Mohammad Nabi HassanZada',
            subject: 'Doctor',
            onPressed: () {}
          ),
          // 使用Expanded包裹，占据剩余屏幕空间
          Expanded(
            child: Container(
              width: MediaQuery.of(context).size.width,
              // 移除固定height设置
              decoration: ShapeDecoration(
                color: Color(0xFFEBEDFF),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30),
                    topRight: Radius.circular(30),
                  ),
                ),
              ),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Icon(
                        Icons.arrow_back,
                        size: 24,
                        color: AppColors.primary,
                      ),
                      Text(
                        'Navigation',
                        style: TextStyle(
                          color: Color(0xFF333E92),
                          fontSize: 14,
                          fontFamily: 'Poppins',
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Icon(
                        Icons.cancel_outlined,
                        size: 24,
                        color: AppColors.primary,
                      ),
                    ],
                  ).paddingSymmetric(vertical: 12, horizontal: 15),
        
                  // Grid view
                  Expanded(
                    child: GridView.count(
                      // 改为AlwaysScrollableScrollPhysics确保滚动正常
                      physics: AlwaysScrollableScrollPhysics(),
                      // 移除shrinkWrap: true
                      crossAxisCount: 2,
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10,
                      // 移除primary: false，使用默认值
                      children: [
                        _customCart(
                          title: 'Drag Database',
                          color: 0xFFFFF0EC,
                          image: 'assets/png/Pills.png',
                          onTap: () {
                            Get.toNamed(Routes.Drugs_Database);
                          }
                        ),
                        _customCart(
                          title: 'Disease and Treatment',
                          color: 0xFFF0FFEC,
                          image: 'assets/png/hansaplas.png',
                          onTap: () {
                            Get.toNamed(Routes.All_Dieases_Treatment);
                          }
                        ),
                        _customCart(
                          onTap: () {
                            Get.toNamed(Routes.Blood_Donation);
                          },
                          title: 'Blood Donation',
                          color: 0xFFFFE2E1,
                          image: 'assets/png/Pills.png'
                        ),
                        _customCart(
                          onTap: () {
                            Get.toNamed(Routes.Treatment_Abroad);
                          },
                          title: 'Treatment Abroad',
                          color: 0xFFB6E9FF,
                          image: 'assets/png/airplane 1.png'
                        ),
                        _customCart(
                          onTap: () {
                            Get.toNamed(Routes.Pregnancy_Tracker);
                          },
                          title: 'Pregnancy Tracker',
                          color: 0xFFECFDFF,
                          image: 'assets/png/OBJECTS.png'
                        ),
                        _customCart(
                          onTap: () {
                            Get.toNamed(Routes.Checkup_List);
                          },
                          title: 'Checkup Packages',
                          color: 0xFFFFF6D6,
                          image: 'assets/png/microskop.png'
                        ),
                      ],
                    ).paddingOnly(bottom: 30, right: 20, left: 20, top: 8),
                  )
                ],
              ),
            ).paddingSymmetric(horizontal: 20),
          )
        ],
      ),
    );
  }

  Widget _customCart({title, image, color, onTap}) {
    return InkWell(
      onTap: onTap,
      child: Container(
        width: 150,
        height: 150,
        decoration: ShapeDecoration(
          color: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10)
          ),
        ),
        child: Column(
          children: [
            SizedBox(height: 10),
            Container(
              width: 130,
              height: 95,
              decoration: ShapeDecoration(
                color: Color(color),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5)
                ),
              ),
              child: Image.asset(image),
            ),
            SizedBox(height: 10),
            SizedBox(
              width: 77,
              child: Text(
                title,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Color(0xFF3F3F3F),
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  height: 0.97,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

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