如何让Column中的Container填充列宽，适配列内最宽元素且不影响列宽？

要实现让Column中的Container填充该列的宽度（匹配列内最宽元素的宽度），无需设置固定宽度，可以通过IntrinsicWidth结合CrossAxisAlignment.stretch来实现，修改后的代码如下：

Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      ...[0, 1].map(
        (e) => IntrinsicWidth(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                height: 100,
                color: Colors.red,
              ),
              Text(
                "This is the widest element in the column",
              ),
            ],
          ),
        ),
      )
    ],
  ),
),

关键说明： #

• IntrinsicWidth：强制Column的宽度等于其子元素中最宽的那个（这里就是Text的宽度），避免Column被Row过度拉伸
• CrossAxisAlignment.stretch：让Column内的子元素（比如红色Container）自动填充Column的宽度，无需手动设置固定宽度

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