如何让CustomButton实现与ElevatedButton一致的伸缩行为？

核心原因 #

你定义的CustomButton仅设置了最小宽度32、最大宽度无限的约束，但未限制按钮宽度不超过内容的固有宽度。而ElevatedButton这类Material内置按钮，内部通过IntrinsicWidth逻辑自动适配宽度：未设置CrossAxisAlignment.stretch时，会收缩到子内容的宽度（同时满足自身最小宽度64的要求）；当开启CrossAxisAlignment.stretch时，才会占满可用宽度。

你的CustomButton因最大宽度设为无限，在Column未开启stretch时会尽可能抢占横向空间，导致始终处于拉伸状态。

修复方案 #

给CustomButton添加IntrinsicWidth包裹，使其在无强制拉伸时收缩到内容宽度，同时保留拉伸时的占满能力。修改后的代码示例：

class CustomButton extends StatelessWidget {
  final String text;
  const CustomButton({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    return IntrinsicWidth(
      child: ConstrainedBox(
        constraints: const BoxConstraints(
          minWidth: 32,
          minHeight: 32,
          maxHeight: 32,
        ),
        child: Container(
          color: Colors.blue,
          width: double.infinity, // 确保CrossAxisAlignment.stretch时占满宽度
          child: Center(child: Text(text)),
        ),
      ),
    );
  }
}

原理说明 #

• IntrinsicWidth会计算子控件的固有宽度，让按钮默认收缩到内容所需宽度，同时不低于minWidth:32的约束。
• 当Column设置CrossAxisAlignment.stretch时，会向子控件传递无限宽度的约束，此时width: double.infinity会让Container占满整个可用宽度。

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