Flutter布局问题：如何让紫色和绿色容器占满下方全部空间？

我在dartpad.dev中模拟应用设计时遇到布局问题，希望让紫色和绿色容器占满它们下方的全部空间，但当前代码运行后无法实现预期效果。以下是我的代码：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(width: 300, color: Colors.amber),
          Flexible(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Flexible(
                      flex: 1, child: Container(height: 50, color: Colors.white)),
                  Expanded(
                    child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Flexible(
                            flex: 2,
                            child: Container(
                              color: Colors.purple,
                            ),
                          ),
                          Flexible(
                            flex: 4,
                            child: Container(
                              color: Colors.green,
                            ),
                          ),
                        ]),
                  ),
                ],
              ),
          ),
        ],
      ),
    );
  }
}

问题原因与修复方案 #

问题出在上方白色容器的Flexible设置上：你给白色容器指定了固定高度50，同时用Flexible(flex:1)包裹它，这会导致Column无法正确分配剩余空间给下方的Expanded组件。

修改方案很简单，直接去掉白色容器外层的Flexible即可：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(width: 300, color: Colors.amber),
          Flexible(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: [
                // 移除外层Flexible，直接保留固定高度的Container
                Container(height: 50, color: Colors.white),
                Expanded(
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Flexible(
                        flex: 2,
                        child: Container(color: Colors.purple),
                      ),
                      Flexible(
                        flex: 4,
                        child: Container(color: Colors.green),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

原理说明 #

• 当Column的mainAxisSize设为max时，它会尽可能占据父组件的垂直空间。
• 固定高度的容器不需要Flexible包裹，Flexible会强制组件按flex比例分配空间，和固定高度冲突，导致下方Expanded无法获取全部剩余空间。
• 移除Flexible后，白色容器占据固定50高度，Expanded会自动填充Column剩余的所有垂直空间，内部的Row和Flexible容器也就自然占满下方全部空间。

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