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: () {},
          )