Flutter中Container嵌套PageView.builder无法滚动的问题

问题核心 #

你遇到的问题根源是屏幕高度计算错误：用MediaQuery.of(context).size.height获取的是整个屏幕高度（含状态栏、AppBar），但body的可用高度是屏幕高度减去这两部分。直接基于全屏高度设置Container尺寸，会导致组件溢出屏幕，PageView的有效触摸区域被截断，自然无法触发滑动；另外未正确配置滚动物理属性也会加剧问题。

解决方案 #

1. 正确计算body可用高度：获取状态栏和AppBar高度，算出body实际可利用的高度，再以此为基准设置Container尺寸。
2. 明确配置PageView滚动属性：确保AlwaysScrollableScrollPhysics生效，可选添加PageController增强滚动控制（避免潜在异常）。

修改后的代码 #

import 'package:duanflutter1/values/app_colors.dart';
import 'package:duanflutter1/values/app_styles.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final PageController _pageController = PageController();

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final statusBarHeight = MediaQuery.of(context).padding.top;
    final appBarHeight = AppBar().preferredSize.height;
    final bodyAvailableHeight = size.height - statusBarHeight - appBarHeight;

    return Scaffold(
      backgroundColor: AppColor.primaryColor,
      appBar: AppBar(
        elevation: 0,
        title: Text(
          "Hello",
          style: AppStyles.h4.copyWith(color: Colors.blue, fontSize: 36),
        ),
        leading: InkWell(
          onTap: () {},
          child: Image.asset(AppAssets.menu),
        ),
      ),
      body: Container(
        width: double.infinity,
        child: Column(
          children: [
            Container(
              height: bodyAvailableHeight * 1 / 10,
              padding: const EdgeInsets.all(16),
              alignment: Alignment.centerLeft,
              child: const Text("It is bakdkad dkad fkaw fkjaw"),
            ),
            Container(
              height: bodyAvailableHeight * 2 / 3,
              color: Colors.green,
              child: PageView.builder(
                controller: _pageController,
                physics: const AlwaysScrollableScrollPhysics(),
                itemCount: 5,
                itemBuilder: (context, index) {
                  return Container(
                    padding: const EdgeInsets.all(25),
                    decoration: const BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.all(Radius.circular(24)),
                    ),
                  );
                },
              ),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.amber,
        onPressed: () {
          print("exChange");
        },
        child: Image.asset(AppAssets.reload),
      ),
    );
  }
}

更简洁的替代方案（用LayoutBuilder自动获取约束） #

无需手动计算高度，直接通过LayoutBuilder获取body的可用高度：

// 替换原body部分代码
body: LayoutBuilder(
  builder: (context, constraints) {
    return Column(
      children: [
        Container(
          height: constraints.maxHeight * 1 / 10,
          padding: const EdgeInsets.all(16),
          alignment: Alignment.centerLeft,
          child: const Text("It is bakdkad dkad fkaw fkjaw"),
        ),
        Container(
          height: constraints.maxHeight * 2 / 3,
          color: Colors.green,
          child: PageView.builder(
            physics: const AlwaysScrollableScrollPhysics(),
            itemCount: 5,
            itemBuilder: (context, index) {
              return Container(
                padding: const EdgeInsets.all(25),
                decoration: const BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.all(Radius.circular(24)),
                ),
              );
            },
          ),
        )
      ],
    );
  },
),

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