如何在Row/Column中让无子组件的Container占满剩余空间？

你的问题核心是Container未设置高度：Row在Column中时，自身高度默认由子元素高度决定，而你的粉色Container没有指定垂直方向的高度，即便Expanded让它占满Row的水平剩余空间，垂直方向高度为0，因此看不到粉色背景。

以下是两种可行的解决方法：

方法1：给Container设置固定高度 #

直接为Container添加height属性，指定具体高度值：

Row(
  children: [
    const Text("Flutter"),
    Expanded(
      child: Container(
        color: Colors.pink,
        height: 40, // 设置固定高度
      ),
    ),
  ],
)

方法2：让Row自适应Column剩余垂直空间 #

如果需要Row高度随Column剩余空间调整，可给Row外层包裹Expanded，同时让Container垂直方向填满Row空间：

Column(
  children: [
    const Text("Some text"),
    Expanded( // 让Row占满Column剩余垂直空间
      child: Row(
        children: [
          const Text("Flutter"),
          Expanded(
            child: Container(
              color: Colors.pink,
              height: double.infinity, // 垂直方向填满Row
            ),
          ),
        ],
      ),
    ),
    const Text("Some more text"),
  ],
)

调整后粉色Container就能同时占满Row的水平剩余空间和对应垂直空间，正常显示背景色。

内容的提问来源于stack exchange，提问作者S.D.