Flutter教学目录持续更新中

github源代码持续更新中

1.Button简介

Flutter 里有很多的 Button 组件很多，常见的按钮组件有：

• RaisedButton ：凸起的按钮，其实就是 Material Design 风格的 Button
• FlatButton ：扁平化的按钮
• OutlineButton：线框按钮
• IconButton ：图标按钮
• ButtonBar：按钮组
• FloatingActionButton:浮动按钮

2.常用属性

按钮组件有以下常用属性：

• onPressed ：必填参数，按下按钮时触发的回调，接收一个方法，传 null 表示按钮禁用，会显示禁用相关样式
• child ：可以放入wight
• textColor ：文本颜色
• color ：文本颜色
• disabledColor ：按钮禁用时的颜色
• disabledTextColor ：按钮禁用时的文本颜色
• splashColor ：点击按钮时水波纹的颜色
• highlightColor ：点击（长按）按钮后按钮的颜色
• elevation ：阴影的范围，值越大阴影范围越大
• padding ：内边距
• shape ：设置按钮的形状

3.圆角按钮

这里我们用RaisedButton演示，其实这几个Button都差不多，只是各自有一个独特的初始化属性而已，比如RaisedButton就是自带圆角，有水波纹特效，带阴影等属性

1600597223(1).png

 Center(
            child: RaisedButton(
              padding: EdgeInsets.all(10),
              child: Text('圆角button'),
              elevation: 10,
              textColor: Colors.blue,
              highlightColor: Colors.red,
              onPressed: () {
                ToastUtil.showToast('click button');
              },
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
            ),
          ),

4.圆形按钮

这里顺便看一下按钮是可以设置禁用属性的，这时候知道点击时间给null就表示按钮不可用，那么按钮的风格就是disabled设置的样式

1600597238(1).png

 Container(
            padding: EdgeInsets.all(10),
            color: Colors.red,
            height: 100,
            child: RaisedButton(
              padding: EdgeInsets.all(10),
              child: Text('圆形button'),
              disabledColor: Colors.grey,
              disabledElevation: 5,
              elevation: 10,
              disabledTextColor: Colors.white,
              textColor: Colors.blue,
              highlightColor: Colors.red,
              // onPressed: () {
              //   ToastUtil.showToast('click button');
              // },
              //传 null 表示按钮禁用，会显示禁用相关样式
             onPressed: null,
              shape: CircleBorder(
                side: BorderSide(
                  color: Colors.yellow,
                  width: 5,
                ),
              ),
            ),
          ),

5.带图片的Button

1600597249(1).png

 Center(
            child: RaisedButton.icon(
                onPressed: () {
                  ToastUtil.showToast('搜索');
                },
                icon: Icon(Icons.search),
                label: Text('搜索')),
          ),
Center(
            child: RaisedButton.icon(
                onPressed: () {
                  ToastUtil.showToast('扫码');
                },
                icon: Image.asset('images/scan.png'),
                label: Text('扫码')),
          ),

6.IconButton

这个就是一个显示图片的按钮，默认大小是24*24，内边距8，图片居中显示，图片不只是可以放icon，放image也是可以的，icon接受的是widget

1600597528(1).png

Center(
            child: IconButton(
                icon: Icon(Icons.save_alt),
                onPressed: () {
                  ToastUtil.showToast('保存');
                }),
          ),
 Center(
            child: IconButton(
                icon: Image.asset('images/scan.png'),
                onPressed: () {
                  ToastUtil.showToast('保存');
                }),
          ),

7.OutlineButton

一个线框按钮，默认是带圆角的灰色边框

1600598020(1).png

 Center(
            child: OutlineButton(
                child: Text('保存'),
                onPressed: () {
                  ToastUtil.showToast('保存');
                }),
          ),

8.FlatButton

一个没有任何样式的按钮，可以给其他widget提供点击事件

1600598035(1).png

 Center(
            child: FlatButton(
                child: Text('FlatButton'),
                onPressed: () {
                  ToastUtil.showToast('FlatButton');
                }),
          ),

9.FloatingActionButton

浮动按钮，跟安卓里面的是一样的，可以配合Scaffold实现很多有意思的布局样式，还有就是FloatingActionButton如果存在多个需要指定heroTag

1600598045(1).png

Center(
            child: FloatingActionButton(
                child: Text('FloatingActionButton'),
                onPressed: () {
                  ToastUtil.showToast('FloatingActionButton');
                }),
          ),
Center(
            child: FloatingActionButton(
                heroTag: '2',
                child: Icon(Icons.add),
                onPressed: () {
                  ToastUtil.showToast('FloatingActionButton');
                }),
          ),

10.ButtonBar

这里额外介绍一个widget：ButtonBar，它里面可以放多个Button，ButtonBar可以多里面的button做统一样式处理

1600598788(1).png

Container(
            child: ButtonBar(
              buttonPadding: EdgeInsets.all(10),
              buttonHeight: 50,
              alignment: MainAxisAlignment.start,
              buttonTextTheme: ButtonTextTheme.primary,
              layoutBehavior: ButtonBarLayoutBehavior.padded,
              children: [
                RaisedButton(
                  child: Text('button1'),
                  onPressed: () {
                    ToastUtil.showToast('button1');
                  },
                ),
                RaisedButton(
                  child: Text('button2'),
                  onPressed: () {
                    ToastUtil.showToast('button2');
                  },
                ),
                RaisedButton(
                  child: Text('button3'),
                  onPressed: () {
                    ToastUtil.showToast('button3');
                  },
                ),
              ],
            ),
          ),

下一节：基础组件之Scaffold

Flutter（10）：基础组件之Scaffold

Flutter教学目录持续更新中

github源代码持续更新中