Flutter踩坑之路（二）一Flutter初识（基本组件（三）)
我们上篇博客Flutter踩坑之路（二）一Flutter初识（基本组件（二）)讲了关于列表的知识，这次我们来讲一下关于按钮的一些知识。
Flutter 里有很多的 Button 组件很多，常见的按钮组件有：RaisedButton、FlatButton、 IconButton、OutlineButton、ButtonBar、FloatingActionButton 等。
RaisedButton ：凸起的按钮，其实就是 Material Design 风格的 Button
FlatButton ：扁平化的按钮
OutlineButton：线框按钮
IconButton ：图标按钮
ButtonBar:按钮组
FloatingActionButton:浮动按钮
Flutter中按钮中属性如下表所示:
| 属性 | 类型 | 说明 |
|---|---|---|
| onPressed |
VoidCallback |
必填参数，按下按钮时触发的回调，接收一个 方法，传 null 表示按钮禁用，会显示禁用相关 样式 |
| child |
Widget | 文本控件 |
| textColor |
Color | 文本颜色 |
| color |
Color | 按钮的颜色 |
| disabledColor |
Color | 按钮禁用时的颜色 |
| disabledTextColor |
Color | 按钮禁用时的文本颜色 |
| splashColor |
Color | 点击按钮时水波纹的颜色 |
| highlightColor |
Color | 点击（长按）按钮后按钮的颜色 |
| elevation |
double | 阴影的范围，值越大阴影范围越大 |
| shape |
设置按钮的形状 shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ) shape: CircleBorder( side: BorderSide( color: Colors.white, ) ) |
RaisedButton的使用，示例代码如下所示:RaisedButton凸起按钮组件是Material Design的Button，一个凸起的材质矩形按钮，它默认带有阴影和灰色背景，它可以响应按下事件，并且按下会有触摸的效果。
RaisedButton(
onPressed: () {},
//按下事件处理
color: Colors.green,
//按钮的颜色
child: Text("按钮"),
elevation: 10,
//阴影
textColor: Colors.white, //文字的颜色
),
SizedBox(width: 20.0,),
RaisedButton(
onPressed: () {},
//按下事件处理
color: Colors.redAccent,
//按钮的颜色
child: Text("圆角按钮"),
elevation: 10,
//阴影
textColor: Colors.blue, //文字的颜色
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ),
),效果如下图所示:
FlatButton组件是一个扁平的Material Design风格按钮，默认背景透明并不带阴影。按下后，会有背景色。FlatButton的使用，示例代码如下所示：
FlatButton(
onPressed: (){},
child: Text("FlatButton"),
color: Colors.grey,
textColor: Colors.redAccent,
splashColor: Colors.blue,//点击时水波纹的颜色
highlightColor: Colors.deepOrange,//长按按钮的颜色
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),效果如下图所示：
OutlineButton线框按钮，默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)。OutlineButton的使用，示例代码如下所示：
OutlineButton(
onPressed: () {},
child: Text("OutLineButton"),
borderSide:new BorderSide(color: Colors.purple),//设置边框颜色
textColor: Colors.purple,
),效果如下图所示：
IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景，按下会有一个水波纹的效果。IconButton常用属性如下表所示：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| alignment | AlignmentGeometry | Alignment.center | IconButton的Icon对齐方式，默认是居中。Alignment是可以设置x，y的偏移量的 |
| icon | Widget | null | 具体图标 |
| color | Color | null | 图标组件的颜色 |
| iconSize | double | 24.0 | 图标的大小，注意要带上小数点 |
| tooltip | String | “” | 按钮按下时组件提示语句 |
IconButton的使用，示例代码如下所示:
IconButton(
icon: Icon(Icons.ac_unit),
onPressed: (){},
color: Colors.white,//按钮的颜色
tooltip: "雪花",//按钮按下的提示语
iconSize: 32.0,//图标的大小
alignment: Alignment.topCenter,//图标的位置效果如下图所示:
ButtonBar横排的按钮组，可以放多个按钮，通过children属性可以传入多个Button。
ButtonBar的使用，示例代码如下所示:
ButtonBar(
alignment: MainAxisAlignment.center,
children: [
FlatButton(
onPressed: (){},
child: Text("按钮一"),
color: Colors.blue,
),
RaisedButton(
onPressed: (){},
color: Colors.deepOrange,
child: Text("按钮二"),
),
OutlineButton(
onPressed: (){},
child: Text("按钮三"),
borderSide: BorderSide(
color: Colors.blue
),
)
],
), 效果如下图所示:
FloatingActionButton悬停按钮组件，是一个圆形图标按钮。FloatingActionButton通常用于Scaffold.floatingActionButton字段。FloatingActionButton常用属性如下表所示:
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| child | Widget | 一般是Icon | |
| foregroundColor | Color | 前景色 | |
| backgroundColor | Color | 背景色 | |
| elevation | double | 6.0 | 未点击时的阴影值，默认是6.0 |
| highlightElevation | double | 12.0 | 点击时阴影值，默认值是12.0 |
| tooltip | String | 按钮提示文本 | |
| onPressed | VoidCallback | 点击事件回调 | |
| shape | ShapeBorder | CircleBorder | 定义按钮的shape，设置shape时，默认的elevation将会失效，默认为CircleBorder |
FloatingActionButton的使用，示例代码如下所示：
floatingActionButton: FloatingActionButton(
onPressed: (){},
child: Icon(Icons.add),
foregroundColor: Colors.green,//前景色为蓝色
backgroundColor: Colors.red,//背景色为红色
elevation: 12.0,//阴影值
highlightElevation: 30.0,//按下的阴影值
tooltip: "添加",//提示信息
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat, //设置位置效果图如下图所示:
到这里关于按钮的知识就讲解的差不多了，希望大家多多支持小弟一下，如果需要源码的话，可以在下方留言。