Flutter Button（按钮控件）
本文介绍Flutter中常用按钮控件，包括：MaterialButton 、RaisedButton 、FlatButton 、IconButton 、FloatingActionButton 、OutlineButton 、ButtonBar 、lButton.icon()。
Material 组件库中提供了多种按钮组件，它们都有如下共同属性。
- 按下时都会有“水波动画”（又称“涟漪动画”，就是点击时按钮上会出现水波荡漾的动画）。
- 有一个onPressed属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
1、按钮点击示例
2、按钮类型已经含义
不同的Button拥有不同的功能，正确使用对应的Button可以事半功倍。
Button | 含义 |
|---|---|
MaterialButton | 默认按钮，扁平，背景透明。按下后，会有背景色。 |
RaisedButton | "漂浮"按钮，带有阴影和背景。按下后，阴影会变大。 |
FlatButton | 扁平按钮，默认背景透明。按下后，会有背景色，与MaterialButton一致。 |
IconButton | 图标按钮，只能是纯图标，按钮不可展示文案。 |
FloatingActionButton | 浮动按钮，可显示文字和图标，二者选其一。 |
OutlineButton | 外边框按钮，可设置按钮外边框颜色。 |
ButtonBar | 水平布局的按钮容器，可放置多个Button或Text。 |
lButton.icon() | 带图标文字混合按钮，RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数，它可以轻松创建带图标和文字的按钮。 |
3、按钮使用示例
3.1、MaterialButton
默认按钮，扁平，背景透明。按下后，会有背景色。 示例见图一。
new MaterialButton(
child: new Text('MaterialButton'),
onPressed: () {},
),3.2、RaisedButton
"漂浮"按钮，带有阴影和背景。按下后，阴影会变大。也是应用最常见的按钮。 示例见图一。
new RaisedButton(
child: new Text('RaisedButton'),
onPressed: () {},
),3.3、FlatButton
扁平按钮，默认背景透明。按下后，会有背景色，与MaterialButton一致。 示例见图一。
new FlatButton(
child: new Text('FlatButton'),
onPressed: () {},
),3.4、IconButton
图标按钮，只能是纯图标，按钮不可展示文案。 示例见图一。
new IconButton(
icon: new Icon(Icons.wifi),
tooltip: 'click IconButton',
onPressed: () {},
),3.5、FloatingActionButton
浮动按钮，可显示文字和图标，二者选其一。
可在页面通过设置floatingActionButton来指定页面悬浮按钮，默认在右下角。
示例见图二。
appBar: new AppBar(
title: new Text("按钮控件"),
),
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.add_a_photo),
// child: new Text('FloatingActionButton'),
tooltip: 'click FloatingActionButton',
onPressed: () {},
),3.6、OutlineButton
外边框按钮，可设置按钮外边框颜色。 示例见图二。
OutlineButton(
child: Text("OutlineButton"),
borderSide: new BorderSide(color: Colors.pink),
onPressed: () {},
),3.7、ButtonBar
水平布局的按钮容器，可放置多个Button或Text。 示例见图一。
new ButtonBar(
children: <Widget>[
new BackButton(),
new CloseButton(),
new Text('ButtonBar组件'),
new RaisedButton(
child: new Text('Button'),
onPressed: () {},
),
],
),3.8、Button.icon
带图标文字混合按钮，RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数，它可以轻松创建带图标和文字的按钮。 示例见图二。
RaisedButton.icon(
icon: Icon(Icons.send),
label: Text("发送"),
onPressed: () {},
),
OutlineButton.icon(
icon: Icon(Icons.add),
label: Text("添加"),
onPressed: () {},
),
FlatButton.icon(
icon: Icon(Icons.info),
label: Text("详情"),
onPressed: () {},
),3.8、自定义Button样式
示例见图二。
FlatButton(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
child: Text("Submit"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
onPressed: () {},
)4、效果图
