按钮是任何应用中出现频率最高的交互组件，Flutter在3.0版本之后对按钮体系做了一次彻底的重构，旧的RaisedButton、FlatButton、OutlineButton已被标记为废弃，取而代之的是ElevatedButton、TextButton和OutlinedButton三兄弟。很多开发者在实际项目中仍然混用新旧API，或者在选型时凭感觉乱选，导致界面风格不统一、交互体验打折。这篇文章就从实战角度出发，把Flutter按钮的类型选择、用法细节和常见坑点一次性讲清楚。
一、Flutter三大基础按钮怎么选
Flutter Material组件库提供了三个核心按钮，它们的区别主要体现在视觉层级上，选择时先问自己：这个操作在页面里有多重要？
ElevatedButton是凸起按钮，自带阴影和填充色，视觉权重最高，适合页面中的主要操作，比如表单提交、确认购买这类一屏只出现一两次的关键动作。TextButton是文本按钮，只有文字没有背景，视觉最轻，适合次要操作，比如对话框的取消按钮、列表项底部的查看更多。OutlinedButton是描边按钮，介于两者之间，有边框但无填充，适合中等重要性的操作，常与ElevatedButton搭配出现在同一个表单里，比如登录页的注册按钮。
一个简单的判断原则：一屏之内主操作用ElevatedButton，次操作用TextButton，需要并列强调但不抢主按钮风头的用OutlinedButton。不要在一个页面上放多个ElevatedButton，否则用户会不知道该点哪个。
二、常用属性与代码示例
三个按钮的使用方式高度一致，都通过onPressed和onChild两个核心参数控制行为和内容。onPressed为null时按钮自动进入禁用状态，这是最常用的交互控制手段。
下面是一个覆盖常见属性的示例：
ElevatedButton(
onPressed: () {
print('按钮被点击');
},
onLongPress: () {
print('长按触发');
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text('提交订单'),
)
除了这三个按钮，IconButton也值得单独说明。它专门用于图标操作，通过tooltip参数可以给无障碍读屏提供提示，建议所有纯图标按钮都加上tooltip，这是很容易被忽略但很有价值的细节。另外FloatingActionButton作为悬浮操作按钮，代表当前页面的最高优先级动作，一个Scaffold原则上只放一个。
三、ButtonStyle样式定制进阶
当styleFrom无法满足需求时，就需要直接使用ButtonStyle。它通过WidgetStateProperty实现不同状态下的样式切换，这是新版按钮体系最强大的地方，也是最容易被误解的地方。
比如要实现按下变深色、禁用变灰的效果：
TextButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.pressed)) {
return Colors.blue.shade700;
}
return Colors.blue;
}),
foregroundColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return Colors.grey;
}
return Colors.white;
}),
),
child: Text('状态按钮'),
)
注意在旧版本Flutter中对应的是MaterialStateProperty，从3.19版本开始统一更名为WidgetStateProperty，两者在过渡期内都可以使用，但新项目建议直接用新名称，避免后续升级再改动。
四、主题统一配置
实际项目中不应在每个按钮上单独写样式，正确做法是通过ElevatedButtonTheme、TextButtonTheme在MaterialApp的theme中全局统一定义：
MaterialApp(
theme: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF1E88E5),
minimumSize: const Size(88, 44),
),
),
),
)
全局主题的好处是换肤、调整设计规范时只需要改一处，按钮风格天然保持一致，这也是成熟项目的标配做法。
五、常见坑点与避坑建议
第一，按钮点击没有水波纹效果。通常是误将splashFactory设为NoSplash，或者自定义的Ink相关组件覆盖了默认效果。排查时优先检查style中是否覆盖了overlayColor和splashFactory。
第二，按钮宽度异常。默认按钮宽度由内容决定，想要通栏按钮有三种方式：用SizedBox配合double.infinity包裹、用ButtonStyle的minimumSize设置，或者外层套Row加Expanded。最推荐第三种，语义最清晰。
第三，禁用状态不生效。直接设置onPressed为null即可禁用，如果发现按钮还能点，多半是在外面又包了一层GestureDetector或InkWell拦截了事件，去掉外层手势即可。
第四，Text设置为禁用颜色不对。按钮禁用时的文字颜色由disabledForegroundColor控制，很多人只改了foregroundColor，结果禁用态颜色看起来很奇怪。记得成对设置。
第五，性能问题。不要在按钮的onPressed闭包中做重计算，也不要在build方法里频繁创建复杂的style对象，可以将其提取为static常量或final成员，减少不必要的重建开销。
六、总结
Flutter按钮选型的核心逻辑是视觉层级匹配操作权重：ElevatedButton对应主操作，OutlinedButton对应次强调操作，TextButton对应轻量操作，IconButton和FloatingActionButton各司其职。样式管理遵循全局主题优先、局部微调兜底的原则。避坑的关键在于理解WidgetStateProperty的状态驱动机制，以及onPressed控制禁用态的简洁设计。把这些规则落实到项目中，按钮部分的代码质量和界面一致性都会有明显提升。建议把本文的判断原则和坑点清单收藏起来，实际开发时对照检查，可以省去不少调试时间。