Flutter：让Row/Column中的Container适配内容宽度且不额外扩展

你遇到的核心问题是Container未指定宽度，默认宽度为0所以不可见，而Expanded会让Column占满整个水平空间，不符合需求。以下是两种更合理的实现方式：

方法一：用IntrinsicWidth约束Column宽度 #

IntrinsicWidth会让子组件的宽度由内部最宽的元素决定（这里就是标题文本的宽度），Container会自动匹配这个宽度：

return Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    IntrinsicWidth(
      child: Column(
        children: [
          Text(
            title,
            style: baseStyle,
          ),
          SizedBox(height: 4), // 可选：调整标题与下划线的间距
          Container(
            height: 4,
            decoration: BoxDecoration(
              color: Colors.yellow,
              borderRadius: BorderRadius.circular(2),
            ),
          ),
        ],
      ),
    ),
  ],
);

方法二：用DecoratedBox直接包裹Text（更简洁） #

如果不需要额外的间距或复杂布局，也可以直接用DecoratedBox给Text添加底部装饰，省去Column层级：

return Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    DecoratedBox(
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: Colors.yellow,
            width: 4,
            style: BorderStyle.solid,
          ),
        ),
        borderRadius: BorderRadius.vertical(bottom: Radius.circular(2)),
      ),
      child: Text(
        title,
        style: baseStyle,
      ),
    ),
  ],
);

这两种方法都不需要重复写Text组件，维护更方便，且能精准匹配文本宽度。

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