文章已同步至掘金：https://juejin.cn/post/6844903956565458952
欢迎访问😃，有任何问题都可留言评论哦~
Flutter 中的按钮也是多种多样，五花八门的，所以本章简单总结一下常用的按钮，及其样式
因为Material组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等，
他们大多数属性都一样，所以后面会统一介绍这些属性，并且按钮的外观大都可以通过属性来自定义，所以前面先介绍其默认外观样式
相同点
只要你引入了Material组件库，就会自动有这些按钮，
也就是在dart文件中import 'package:flutter/material.dart';就可以了
Material 库中的按钮都有如下相同点：
- 按下时都会有“水波动画”（又称“涟漪动画”，就是点击时按钮上会出现水波荡漾的动画）。
- 有一个
onPressed属性来设置点击回调(必写属性)，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
RaisedButton
即漂浮按钮，它默认带有阴影和灰色背景。按下后，阴影会变大
如图：
使用方法：
RaisedButton(
child: Text("normal"),
onPressed: () {},
);
FlatButton
即扁平按钮，默认背景透明并不带阴影。按下后，会有背景色
如图：
使用方法：
FlatButton(
child: Text("normal"),
onPressed: () {},
)
OutlineButton
默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)
如图：
使用方法：
OutlineButton(
child: Text("normal"),
onPressed: () {},
)
IconButton
是一个可点击的图标(Icon)，不包括文字，默认没有背景，点击后会出现背景
如图：
使用方法：
IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () {},
)
图标按钮
RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数，通过它可以轻松创建带图标的按钮
如图：
使用方法：
RaisedButton.icon(
icon: Icon(Icons.send),
label: Text("发送"),
onPressed: _onPressed,
),
OutlineButton.icon(
icon: Icon(Icons.add),
label: Text("添加"),
onPressed: _onPressed,
),
FlatButton.icon(
icon: Icon(Icons.info),
label: Text("详情"),
onPressed: _onPressed,
),
自定义按钮(样式)
按钮外观可以通过其属性来定义，不同按钮属性大同小异
这里以FlatButton为例：
源码示例
构造函数如下：
const FlatButton({
...
@required this.onPressed, //按钮点击回调
this.textColor, //按钮文字颜色
this.disabledTextColor, //按钮禁用时的文字颜色
this.color, //按钮背景颜色
this.disabledColor,//按钮禁用时的背景颜色
this.highlightColor, //按钮按下时的背景颜色
this.splashColor, //点击时，水波动画中水波的颜色
this.colorBrightness,//按钮主题，默认是浅色主题
this.padding, //按钮的填充
this.shape, //外形
@required this.child, //按钮的内容
})
属性解释
正如上面构造函数注释的那样，都是自解释的，所以这里只介绍一个属性
elevation
它可以给一个按钮添加阴影，让其他的按钮也可以实现第一种按钮的效果
例如：
elevation: 10,就这样添加就好了
下面给出几个例子看一下就OK了，其他属性不做过多解释
示例：
定义一个蓝色背景，有阴影，并且两边是圆角的按钮
如图：
代码：
RaisedButton(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
child: Text("Submit"),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: () {},
)
定义一个圆形按钮：
RaisedButton(
child: Text("圆形按钮"),
textColor: Colors.white,
color: Colors.blue,
shape: CircleBorder(
side: BorderSide(color: Colors.white)
),
onPressed: () {},
),
其中shape中的CircleBorder就是直接定义外形为圆形
评论区