如何让OutlinedButton宽度适配Row内容？组件层级为Card→SizedBox(width:300)→Column

要让OutlinedButton的宽度适配内部Row的内容宽度，同时保持按钮高度为40，可以通过以下两种方式修改代码：

方法一：用Align包裹按钮 + 限制Row收缩 #

通过Align让按钮不强制撑满父容器宽度，同时给Row设置mainAxisSize: MainAxisSize.min确保Row仅包裹内容：

Align(
  child: OutlinedButton(
    onPressed: null,
    style: OutlinedButton.styleFrom(
      minimumSize: const Size(0, 40), // 固定高度40，宽度由内容决定
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min, // 让Row收缩到内容宽度
      children: [
        Text(widget.leading,
            style: TextStyle(
                fontFamily: 'JT', fontSize: 18, color: widget.color)),
        const SizedBox(width: 10),
        Text(widget.txt,
            style: TextStyle(
                fontFamily: 'NunitoEB', fontSize: 16, color: widget.color)),
        const SizedBox(width: 10),
        Text(widget.suffix,
            style: TextStyle(
                fontFamily: 'JT', fontSize: 18, color: widget.color)),
      ],
    ),
  ),
)

方法二：用IntrinsicWidth包裹按钮 #

IntrinsicWidth会自动让按钮宽度匹配子元素的实际宽度，无需额外修改Row：

IntrinsicWidth(
  child: OutlinedButton(
    onPressed: null,
    style: OutlinedButton.styleFrom(
      fixedSize: const Size.fromHeight(40), // 保持高度40
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(widget.leading,
            style: TextStyle(
                fontFamily: 'JT', fontSize: 18, color: widget.color)),
        const SizedBox(width: 10),
        Text(widget.txt,
            style: TextStyle(
                fontFamily: 'NunitoEB', fontSize: 16, color: widget.color)),
        const SizedBox(width: 10),
        Text(widget.suffix,
            style: TextStyle(
                fontFamily: 'JT', fontSize: 18, color: widget.color)),
      ],
    ),
  ),
)

关键说明 #

• 原代码中fixedSize: const Size.fromHeight(40)会让按钮宽度默认撑满父容器（即300px），替换为minimumSize或配合IntrinsicWidth可解除宽度强制约束。
• 两种方法都能实现按钮宽度与Row内容完全对齐，可根据布局需求选择。

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