Flutter嵌套两个Column时出现底部无限像素溢出错误该如何解决？

• 核心错误是子组件brandDisplayContent的返回值使用了Scaffold：Scaffold是页面级根容器组件，默认会尝试占满全部可用空间，父组件的Column不会给子元素传递强制宽高约束，导致Scaffold高度无限延伸，触发溢出报错。
• 额外规范问题：Dart类名需要遵循大驼峰命名规则，否则会触发代码规范警告。
• 细节问题：Color.fromRGBO的第四个参数是透明度，取值范围为0~1，你传入的100会被默认截断为1，属于无效参数。

1. 修改子组件代码 #

移除子组件内冗余的Scaffold，直接返回Container容器即可：

// 类名改为大驼峰符合Dart开发规范
class BrandDisplayContent extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    var size = MediaQuery.of(context).size;
    return Container(
        height: 450,
        width: size.width,
        padding: EdgeInsets.only(top:200),
        // 修正透明度参数
        color: Color.fromRGBO(132, 119, 240, 1),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            brandText(),
            littleTitleText(),
          ],
        )
    );
  }
}

Text brandText(){
  return Text(
    "BRANDEE",
    style: TextStyle(
      color: Colors.white,
      fontSize: 45,
      letterSpacing: 8,
    ),
    textAlign: TextAlign.center,
  );
}

Text littleTitleText(){
  return Text(
    "Play to rise",
    style: TextStyle(
      color: Colors.white,
      fontSize: 18,
    ),
    textAlign: TextAlign.center,
  );
}

2. 修改父组件调用 #

同步修改父组件内的子组件调用名：

class LogingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    var size = MediaQuery.of(context).size;
    return Scaffold(
      body: Container(
        width: size.width,
        height: size.height,
        child: Column(
          children: [
            BrandDisplayContent(),
            //buttonsDisplayContent(),
          ],
        ),
      ),
    );
  }
}

后续要在Column中添加按钮区域时，可以用Expanded包裹按钮组件，让按钮自动占满Column剩余高度，避免再次出现溢出问题。

内容的提问来源于stack exchange，提问作者Malaury Boudon