Flutter实现Column嵌套PageView动态自适应高度方案

Expanded、Flexible不生效是必然的，核心原因两点：

• 你的BranchViewBottomSection是嵌在CustomScrollView的SliverToBoxAdapter里的，滚动容器对子组件的高度约束是无界的，而Expanded的作用是占用父组件剩余的明确高度空间，父组件没有固定高度边界，根本算不出剩余空间，自然失效。
• PageView本身的布局逻辑是要求父组件给明确高度约束，默认不会自动适配子组件内容高度，直接丢在无界高度的滚动容器里，要么报约束错误要么高度显示异常。

通过动态测量当前显示页面的内容高度，实时给PageView设置对应高度即可，不需要修改父组件的CustomScrollView结构，具体改法如下：

1. 将BranchViewBottomSection从ConsumerWidget改为ConsumerStatefulWidget，用来存储页面高度、PageController等状态
2. 给Column设置mainAxisSize: MainAxisSize.min，让它按内容高度自适应，不要强行占满滚动容器的全部空间
3. 移除包裹PageView的Expanded，用动态高度的容器包裹PageView
4. 给每个Page子页面添加GlobalKey，在页面首帧渲染、页面切换完成后测量当前页面的真实高度，更新容器高度

修改后的完整BranchViewBottomSection代码：

class BranchViewBottomSection extends ConsumerStatefulWidget {
  const BranchViewBottomSection({
    Key? key,
    required this.data,
    required this.branchId,
    required this.companyId,
  }) : super(key: key);

  final Map<String, dynamic> data;
  final String branchId;
  final String companyId;

  @override
  ConsumerState<BranchViewBottomSection> createState() => _BranchViewBottomSectionState();
}

class _BranchViewBottomSectionState extends ConsumerState<BranchViewBottomSection> {
  late final PageController _pageController;
  // 存储4个tab页各自的内容高度
  final List<double> _pageHeights = List.filled(4, 0);
  // 每个页面的GlobalKey，用于获取渲染后的真实高度
  final List<GlobalKey> _pageKeys = List.generate(4, (index) => GlobalKey());
  // 当前页面的显示高度，给个初始值避免首帧闪烁
  double _currentHeight = 200;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
    // 首帧渲染完成后测量第一个页面的高度
    WidgetsBinding.instance.addPostFrameCallback((_) => _measurePageHeight(0));
  }

  // 测量指定索引页面的高度并更新状态
  void _measurePageHeight(int pageIndex) {
    final currentContext = _pageKeys[pageIndex].currentContext;
    if (currentContext == null) return;
    final renderBox = currentContext.findRenderObject() as RenderBox?;
    if (renderBox == null) return;
    final newHeight = renderBox.size.height;
    if (_pageHeights[pageIndex] == newHeight) return;
    setState(() {
      _pageHeights[pageIndex] = newHeight;
      _currentHeight = newHeight;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 原有顶部tab栏逻辑完全保留
        SizedBox(
          height: 50,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemCount: widget.data['available_sections'].length,
                itemBuilder: (BuildContext context, int index) {
                  final isActive = widget.data['available_sections'][index]["branchTabValue"] ==
                      ref.read(tabIndexProvider);
                  return BranchSectionBox(
                      data: widget.data, index: index, isActive: isActive);
                },
              ),
            ],
          ),
        ),
        // 原有点击跳转的粉色按钮逻辑完全保留
        GestureDetector(
          onTap: () {
            Navigator.of(context).push(
              PageRouteBuilder(
                pageBuilder: (context, animation, secondaryAnimation) =>
                    MenuView(
                  branchId: widget.branchId,
                  companyId: widget.companyId,
                  branchData: widget.data,
                ),
                transitionsBuilder:
                    (context, animation, secondaryAnimation, child) {
                  const begin = Offset(1.0, 0.0);
                  const end = Offset.zero;
                  const curve = Curves.ease;

                  final tween = Tween(begin: begin, end: end);
                  final curvedAnimation = CurvedAnimation(
                    parent: animation,
                    curve: curve,
                  );

                  return SlideTransition(
                    position: tween.animate(curvedAnimation),
                    child: child,
                  );
                },
              ),
            );
          },
          child: Container(
            height: 50,
            width: MediaQuery.of(context).size.width,
            color: Colors.pink,
            child: const Center(
              child: Text(
                "Sipariş vermek için dokunun.",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
        // 替换原有Expanded包裹的PageView
        SizedBox(
          height: _currentHeight,
          // 想要切换页面时高度动画更顺滑，可以把上面的SizedBox换成AnimatedContainer：
          // AnimatedContainer(
          //   height: _currentHeight,
          //   duration: const Duration(milliseconds: 200),
          //   curve: Curves.easeInOut,
          //   child: ...
          // )
          child: PageView(
            controller: _pageController,
            onPageChanged: (pageIndex) {
              ref.read(tabIndexProvider.notifier).state =
                  widget.data['available_sections'][pageIndex]['branchTabValue'];
              // 页面切换完成后等一帧再测量高度，避免拿到旧页面的渲染结果
              WidgetsBinding.instance.addPostFrameCallback((_) => _measurePageHeight(pageIndex));
            },
            children: [
              // 每个子页面套Align，避免被PageView强制拉伸占满高度，保证测量的是内容真实高度
              Align(
                key: _pageKeys[0],
                alignment: Alignment.topCenter,
                child: BranchViewHomePage(),
              ),
              Align(
                key: _pageKeys[1],
                alignment: Alignment.topCenter,
                child: BranchViewDetailsPage(),
              ),
              Align(
                key: _pageKeys[2],
                alignment: Alignment.topCenter,
                child: const BranchViewCommentsPage(),
              ),
              Align(
                key: _pageKeys[3],
                alignment: Alignment.topCenter,
                child: BranchViewContactPage(),
              ),
            ],
          ),
        )
      ],
    );
  }
}

• 如果PageView的子页面内部嵌套了ListView、GridView这类滚动组件，必须给这些组件加shrinkWrap: true，同时设置physics: const NeverScrollableScrollPhysics()，因为外层已经有CustomScrollView处理整体页面滚动，内部滚动组件不要自行响应滑动，否则会出现滑动冲突、高度测量不准的问题。
• 如果四个tab页面的高度差比较大，建议把包裹PageView的SizedBox换成注释里的AnimatedContainer，高度变化时会有平滑过渡，不会生硬跳变。
• 父组件的CustomScrollView结构不需要做任何修改，可以正常保留。

内容的提问来源于stack exchange，提问作者Emirhan Gümüş