Flutter技术问题：如何让红色方块与文本占满全部垂直空间？

当前代码运行后，红色方块与文本未填满外层黄色容器的垂直空间，可通过以下调整实现完全覆盖：

原代码 #

return (Container(
    height: 50,
    color: Colors.amber[colorCodes[index % 2]],
    child: Row(children: [
      Expanded(
          child: Container(child:
         const Column(
        children: [
          Row(children: [
            Expanded(
                flex: 8, 
                child: DecoratedBox(
                    decoration: BoxDecoration(color: Colors.red),
                    child: Text("hello"))),
            Expanded(flex: 4, child: Text("world")),
          ]),
          Expanded(
              child: Align(
                  alignment: Alignment.bottomLeft,
                  child: LinearProgressIndicator(
                      minHeight: 3,
                      backgroundColor: Colors.redAccent,
                      value: 0.50)))
        ],
      ))),
    ])
    ));

修改后代码 #

return (Container(
    height: 50,
    color: Colors.amber[colorCodes[index % 2]],
    child: Row(children: [
      Expanded(
          child: Container(child:
         Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                  flex: 8, 
                  child: DecoratedBox(
                      decoration: BoxDecoration(color: Colors.red),
                      child: Center(child: Text("hello")))),
              Expanded(flex: 4, child: Center(child: Text("world"))),
            ]),
          Expanded(
              child: Align(
                  alignment: Alignment.bottomLeft,
                  child: LinearProgressIndicator(
                      minHeight: 3,
                      backgroundColor: Colors.redAccent,
                      value: 0.50)))
        ],
      ))),
    ])
    ));

关键修改说明 #

• 给Column添加mainAxisSize: MainAxisSize.max：默认Column仅包裹子组件高度，设置该属性后会强制占满父级容器的全部垂直空间。
• 给第一个Row添加crossAxisAlignment: CrossAxisAlignment.stretch：让Row内的子组件垂直拉伸，填满Row的高度，红色方块因此能覆盖整个Row的垂直区域。
• 给Text添加Center包裹：避免文本贴在红色区域边缘，提升视觉体验（可根据需求调整）。

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