Flutter多层Widget嵌套出现白屏bug，滚动区域无法正常显示如何解决？

• 布局约束丢失：Parent 组件的根容器是无高度约束的 Column，默认会撑开至所有子元素总高度。你给第一个子元素绿色容器设置了2500的高度，远超普通设备屏幕高度，导致分配给 ElderChild 的可用高度为0，组件无法渲染。
• Expanded 失效：ElderChild 内部用 Expanded 包裹滚动组件，但 Expanded 仅能在有确定高度的Flex容器（Column/Row）中正常计算可用高度，外层无约束的Column无法提供边界，导致滚动组件布局异常。

仅需要修改 Parent 组件的代码即可，不需要调整其他层级，修改后的代码如下：

import 'package:app3/widgets/Posts/SeenByOthers/PostBody/ElderChild.dart';
import 'package:flutter/material.dart';

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

  @override
  _ParentState createState() => _ParentState();
}

class _ParentState extends State<Parent> {
  @override
  Widget build(BuildContext context) {
    // 新增SizedBox.expand让Column占满当前页面所有可用高度
    return SizedBox.expand(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            width: 100,
            height: 100, // 原2500为测试值，替换为你实际需要的固定头部高度即可
            color: Colors.green,
            child: const Text('Main bar'),
          ),
          // 给ElderChild套Expanded，让它占满Column剩下的全部高度
          Expanded(child: ElderChild()),
        ]
      ),
    );
  }
}

你原有的组件嵌套层级无需调整，对应关系如下：

修改后顶部绿色的固定栏、ElderChild中的红色固定栏都保持不动，底部黄色的滚动区域可以正常滑动，符合需求。

内容的提问来源于stack exchange，提问作者Pretty Girl