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