Flutter报RenderFlex子组件flex非零但高度约束无界错误如何解决

问题原因 #

RenderFlex约束报错的核心是Expanded组件的层级放置错误：
你当前将Expanded放在了无高度约束的内层Column中，它的父级是被外层无固定高度Container包裹的Column，内层Column的高度是无界的，Expanded无法计算可占用的剩余高度，就会触发该报错；换成Flexible后不会报错但因为没有高度约束，白色容器高度为0就不会显示。

解决方法 #

调整布局层级，将Expanded组件从内层Column移出，作为Scaffold body外层Column的直接子组件，让它可以拿到屏幕整体高度的约束，正确计算剩余可用空间。

修正后完整代码 #

class TasksScreen extends StatelessWidget {
  const TasksScreen({
    Key? key
  }): super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlueAccent,
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.lightBlueAccent,
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 顶部蓝色区域内容
          Container(
            padding: const EdgeInsets.only(
                top: 60.0, bottom: 30.0, right: 30.0, left: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const <Widget>[
                CircleAvatar(
                  backgroundColor: Colors.white,
                  child: Icon(
                    Icons.list,
                    color: Colors.lightBlueAccent,
                    size: 30.0,
                  ),
                  radius: 30.0,
                ),
                SizedBox(
                  height: 10.0,
                ),
                Text(
                  'TodoList',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w700,
                    fontSize: 50.0,
                  ),
                ),
                Text(
                  '12 items',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.0,
                  ),
                ),
              ]
            ),
          ),
          // 白色区域移到外层Column，用Expanded包裹
          Expanded(
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20.0),
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0)),
              ),
            ),
          ),
        ],
      )
    );
  }
}

效果展示 #

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