Flutter如何让Row内固定宽度容器垂直填充行高（适配子元素高度）

直接上可行的实现方案，核心是利用IntrinsicHeight让Row的高度由内容子元素决定，同时让蓝色块自动填充垂直空间：

ListView.builder(
  itemCount: 5,
  itemBuilder: (context, index) {
    return IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          // 固定宽度的蓝色块，自动填充Row高度
          Container(
            width: 20,
            color: Colors.blue,
          ),
          // 右侧内容容器：决定Row高度，最小40
          Expanded(
            child: Container(
              constraints: const BoxConstraints(minHeight: 40),
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
              child: Text(
                index == 0 ? '短内容' : '这是一段较长的内容，用来测试Row高度随内容变化的情况，蓝色块会自动跟着填充整个高度',
              ),
            ),
          ),
        ],
      ),
    );
  },
)

关键逻辑说明： #

• IntrinsicHeight：强制Row的高度由其子元素的固有高度决定（这里就是右侧的内容容器），避免Row在ListView的无限垂直约束下无限拉伸。
• CrossAxisAlignment.stretch：让Row的子元素（蓝色块和内容容器）垂直填充Row的整个高度，蓝色块不需要手动设置height。
• BoxConstraints(minHeight: 40)：给右侧内容容器设置最小高度，保证即使内容很短，Row的高度也不会低于40，蓝色块同样会填充这个最小高度。

这种方案既满足了蓝色块垂直填充的需求，又不会触发ListView的无限高度问题，完全贴合你的场景。

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