Flutter 各种 Button 详细总结
一、ElevatedButton（凸起按钮）
基本构造
ElevatedButton(
  onPressed: () { 
  // 点击事件回调，为null时按钮会禁用（灰色且不可点击）
  print("ElevatedButton被点击");
  },
  onLongPress: () {
  // 长按事件回调
  print("ElevatedButton被长按");
  },
  child: Text("基础凸起按钮"), // 按钮内容，可为Text、Icon等组件
)
样式定制（通过 style 参数）
ElevatedButton(
  style: ElevatedButton.styleFrom(
  // 按钮尺寸
  minimumSize: Size(200, 50), // 最小宽高
  // 背景色和前景色（文本、图标颜色）
  backgroundColor: Colors.blue, // 背景色，禁用时会自动变灰
  foregroundColor: Colors.white, // 前景色
  // 边框
  side: BorderSide(color: Colors.black, width: 2), // 边框样式
  // 圆角
  shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(10), // 圆角半径
  ),
  // 阴影
  elevation: 5, // 阴影高度，值越大阴影越明显
  // 内边距
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  ),
  onPressed: () {},
  child: Text("样式定制按钮"),
)
使用场景
-
页面中需要突出显示的主要操作按钮，如 “提交”“确认”“下一步” 等。
-
需要通过视觉凸起效果引导用户注意的交互点。
二、TextButton（文本按钮）
基本构造
TextButton(
  onPressed: () {
  print("TextButton被点击");
  },
  child: Text("基础文本按钮"),
)
样式定制
TextButton(
  style: TextButton.styleFrom(
  // 前景色（文本颜色）
  foregroundColor: Colors.red,
  // 点击时的背景色（水波纹颜色）
  backgroundColor: Colors.grey\[100],
  // 文本样式
  textStyle: TextStyle(
  fontSize: 16,
  fontWeight: FontWeight.bold,
  ),
  // 内边距
  padding: EdgeInsets.all(15),
  // 形状
  shape: StadiumBorder(), // 体育场形状（两端半圆）
  ),
  onPressed: () {},
  child: Text("样式定制文本按钮"),
)
使用场景
-
次要操作按钮，如 “取消”“返回”“查看详情” 等。
-
导航栏、列表项中的辅助操作，如 “编辑”“删除”（搭配图标使用时更灵活）。
三、OutlinedButton（边框按钮）
基本构造
OutlinedButton(
  onPressed: () {
  print("OutlinedButton被点击");
  },
  child: Text("基础边框按钮"),
)
样式定制
OutlinedButton(
  style: OutlinedButton.styleFrom(
  // 边框样式
  side: BorderSide(
  color: Colors.green, // 边框颜色
  width: 2, // 边框宽度
  style: BorderStyle.solid, // 边框样式（实线、虚线等）
  ),
  // 前景色（文本颜色）
  foregroundColor: Colors.green,
  // 点击时的背景色
  backgroundColor: Colors.green\[50],
  // 圆角
  shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(5),
  ),
  // 内边距
  padding: EdgeInsets.symmetric(horizontal: 30),
  ),
  onPressed: () {},
  child: Text("样式定制边框按钮"),
)
使用场景
-
介于 ElevatedButton 和 TextButton 之间的操作，如 “保存草稿”“添加到收藏” 等。
-
需要与周围元素区分开，但又不需要过于突出的按钮。
四、IconButton（图标按钮）
基本构造
IconButton(
  onPressed: () {
  print("IconButton被点击");
  },
  icon: Icon(Icons.favorite), // 图标
  tooltip: "收藏", // 长按或悬停时显示的提示文本
)
样式定制
IconButton(
  icon: Icon(
  Icons.share,
  color: Colors.purple, // 图标颜色
  size: 24, // 图标大小
  ),
  onPressed: () {},
  // 点击区域大小
  splashRadius: 20, // 水波纹半径
  // 禁用时的颜色
  disabledColor: Colors.grey\[300],
  // padding
  padding: EdgeInsets.all(10),
)
使用场景
-
工具栏、导航栏中的操作按钮，如 “搜索”“分享”“更多选项” 等。
-
列表项中的辅助操作，如 “删除”“编辑”（搭配 ListTile 的 trailing 使用）。
五、FloatingActionButton（悬浮按钮）
基本构造
FloatingActionButton(
  onPressed: () {
  print("FloatingActionButton被点击");
  },
  child: Icon(Icons.add), // 通常为Icon
)
样式定制
FloatingActionButton(
  child: Icon(Icons.save),
  onPressed: () {},
  // 背景色
  backgroundColor: Colors.orange,
  // 形状
  shape: CircleBorder(), // 圆形（默认），也可改为RoundedRectangleBorder等
  // elevation（阴影）
  elevation: 8,
  // mini模式（小尺寸）
  mini: false, // 默认为false（大尺寸），true为小尺寸
  // 点击水波纹颜色
  splashColor: Colors.white,
)
使用场景
- 页面中的主要行动点，如 “添加数据”“创建内容” 等，通常放在 Scaffold 的 floatingActionButton 位置。
六、按钮组合与高级用法
带图标的按钮（文本 + 图标）
// ElevatedButton带图标
ElevatedButton.icon(
  icon: Icon(Icons.send), // 左侧图标
  label: Text("发送消息"), // 右侧文本
  onPressed: () {},
)
// TextButton带图标
TextButton.icon(
  icon: Icon(Icons.phone),
  label: Text("联系我们"),
  onPressed: () {},
)
禁用状态处理
所有按钮设置 onPressed 为 null 时进入禁用状态，可通过样式定制禁用时的外观：
ElevatedButton(
  onPressed: null, // 禁用
  style: ElevatedButton.styleFrom(
  disabledBackgroundColor: Colors.grey\[200], // 禁用时背景色
  disabledForegroundColor: Colors.grey\[500], // 禁用时前景色
  ),
  child: Text("禁用状态按钮"),
)
按钮组（多个按钮并排）
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: \[
  ElevatedButton(onPressed: () {}, child: Text("按钮1")),
  SizedBox(width: 10), // 按钮间距
  OutlinedButton(onPressed: () {}, child: Text("按钮2")),
  ],
)
七、不同按钮的核心区别对比
| 按钮类型 | 视觉特点 | 典型用途 | 核心样式参数 |
|---|---|---|---|
| ElevatedButton | 有背景、带阴影、凸起 | 主要操作按钮 | backgroundColor、elevation |
| TextButton | 无背景、仅文本样式 | 次要操作按钮 | foregroundColor、textStyle |
| OutlinedButton | 有边框、无明显背景 | 辅助操作按钮 | side（边框）、foregroundColor |
| IconButton | 仅图标、无背景（点击有水波纹） | 工具栏、列表辅助操作 | icon、splashRadius |
| FloatingActionButton | 圆形、悬浮、突出显示 | 主要行动点（如添加） | backgroundColor、shape |
（注：文档部分内容可能由 AI 生成）
