Flutter中Column内PageView的自适应高度适配问题

你的问题核心是滚动组件嵌套时的高度约束冲突：PageView作为滚动组件需要明确高度才能渲染，但固定高度在小屏幕会溢出；而内部GridView默认可滚动的特性，又会导致PageView无法自动确定自身高度。

直接上可行的修改方案：

方案1：让GridView自适应高度（推荐） #

给内部GridView添加两个关键属性，让它停止滚动并根据内容自动收缩到合适高度，这样PageView就能基于这个高度自适应，外层无需固定高度：

Container(
  margin: EdgeInsets.fromLTRB(20.w, 20.h, 10.w, 3.h),
  // 移除固定height设置
  child: Column(
    children: [
      Expanded(
        child: PageView.builder(
          itemCount: controller.pages.length,
          controller: controller.pageController,
          itemBuilder: (context, index) {
            return GridView.builder(
              // 1. 禁止GridView滚动，交给PageView处理横向切换
              physics: const NeverScrollableScrollPhysics(),
              // 2. 让GridView根据子项数量自动计算高度
              shrinkWrap: true,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
              ),
              itemCount: controller.pages[index].length,
              itemBuilder: ((context, index1) {
                return GestureDetector(
                  onTap: () async {
                    // some code
                  },
                  child: MenuTileWidget(
                    title: controller.pages[index][index1].title,
                    image: controller.pages[index][index1].image,
                  ),
                );
              }),
            );
          },
        ),
      ),
      SmoothPageIndicator(
        controller: controller.pageController,
        count: controller.pages.length,
        effect: WormEffect(
          activeDotColor: color2,
          spacing: 14.w,
          dotWidth: 16.sp,
          dotHeight: 16.sp,
          dotColor: Colors.white,
        ),
      ),
    ],
  ),
)

方案2：动态计算高度（适合需要GridView保留纵向滚动的场景） #

如果单页内容过多，需要GridView支持纵向滚动，可以通过MediaQuery获取屏幕可用高度，减去顶部margin、底部指示器高度等，动态计算PageView的高度：

Container(
  margin: EdgeInsets.fromLTRB(20.w, 20.h, 10.w, 3.h),
  // 动态计算高度：屏幕高度 - 顶部margin - 底部间距 - 指示器预估高度
  height: MediaQuery.of(context).size.height - 20.h - 3.h - 40.h, // 40.h为指示器预估高度，可根据实际调整
  child: Column(
    children: [
      Expanded(
        child: PageView.builder(
          itemCount: controller.pages.length,
          controller: controller.pageController,
          itemBuilder: (context, index) {
            return GridView.builder(
              // 保留GridView纵向滚动
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
              ),
              itemCount: controller.pages[index].length,
              itemBuilder: ((context, index1) {
                return GestureDetector(
                  onTap: () async {
                    // some code
                  },
                  child: MenuTileWidget(
                    title: controller.pages[index][index1].title,
                    image: controller.pages[index][index1].image,
                  ),
                );
              }),
            );
          },
        ),
      ),
      SmoothPageIndicator(
        controller: controller.pageController,
        count: controller.pages.length,
        effect: WormEffect(
          activeDotColor: color2,
          spacing: 14.w,
          dotWidth: 16.sp,
          dotHeight: 16.sp,
          dotColor: Colors.white,
        ),
      ),
    ],
  ),
)

关键说明 #

• 方案1更简洁，适合单页内容能在屏幕内放下的场景，完全规避高度适配问题。
• 方案2适合内容较多需要纵向滚动的情况，动态计算高度可适配不同屏幕尺寸。

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