Flutter 常用Widget-按钮
按钮，是我们开发中最常用的部件之一，在Flutter中也提供了丰富的按钮部件。
MaterialButton
- RaisedButton
- OutlineButton
- FlatButton
- IconButton
MaterialButton，依赖于widget tree中最近的ButtonTheme和Theme的Material按钮。
按钮的大小将扩展以适合子窗口小部件。
其onPressed处理函数为null的MaterialButtons将被禁用。 要启用按钮，请确保为onPressed传递非null值。
官方建议考虑使用FlatButton，OutlineButton或RaisedButton，它们会使用与material设计规范相匹配的适当默认值来配置按钮。
如果不继承主题默认值，直接创建按钮，请使用RawMaterialButton。
如果希望保持涟漪效果，但又不想使用按钮，请直接使用InkWell。
=================================================================================================
MaterialButton
class ButtonPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: MaterialButton(
onPressed: () {},
child: Text(
'我是MaterialButton',
),
),
),
);
}
}
我们可以看到由于没有配置按钮颜色大小等信息，所以所有的配置都是默认的，点击之后会有涟漪效果。如果onPressed: 属性不设置，那么按钮被禁用。因为button的配置都差不多，所以关于主题颜色配置，我们后面一起研究。
RaisedButton
RaisedButton是material设计规范中的“凸起按钮”。material设计规范中建议，凸起按钮应该添加在平面布局中，避免在已升高的内容（例如对话框或卡片）上使用凸起的按钮。默认带有阴影和灰色背景。按下后，阴影会变大
同样，onPressed回调为null，则该按钮将被禁用，并且默认情况下将类似于DisabledColor中的平面按钮。 如果尝试更改按钮的颜色并且没有任何效果，请检查是否传递了非null的onPressed函数。
凸起的按钮的最小尺寸为88.0 x 36.0，可以用ButtonTheme覆盖。
class ButtonPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
onPressed: () {},
child: Text(
'我是RaisedButton',
),
),
),
);
}
}FlatButton
FlatButton是material设计规范中的的“扁平按钮”。平面按钮没有可见的边框，默认背景透明并不带阴影。按下后，会有背景色。
同样的，onPressed回调为null，则该按钮将被禁用，不会对触摸产生反应，并且将按照disabledColor属性而不是color属性指定的颜色进行着色。如果您尝试更改按钮的颜色并且没有任何效果，请检查是否传递了非null的onPressed处理函数。
平面按钮的最小尺寸为88.0 x 36.0，可以用ButtonTheme覆盖。
class ButtonPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FlatButton(
onPressed: () {},
child: Text(
'我是FlatButton',
),
),
),
);
}
}OutlineButton
介于RaisedButton和FlatButton的特性之间：带边框的按钮，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影。轮廓按钮的边框由形状定义，外观由borderSide，disabledBorderColor和highlightedBorderColor定义。
同样，onPressed回调为null，则该按钮将被禁用，并且默认情况下将类似于DisabledColor中的平面按钮。
按钮的最小大小为88.0 x 36.0，可以用ButtonTheme覆盖。
class ButtonPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: OutlineButton(
onPressed: () {},
child: Text(
'我是OutlineButton',
),
),
),
);
}
}IconButton
material设计中的图标按钮。要求父节点中之一是material widget。图标按钮通常在AppBar.actions字段中使用，但也不限于此。
同样，onPressed回调为null，则该按钮将被禁用，并且不会对触摸做出反应。无论实际的iconSize大小如何，图标按钮的点击区域都将至少为48.0像素大小，以满足material设计规范中对触摸目标尺寸的要求。
class ButtonPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: IconButton(
onPressed: () {},
icon: Icon(Icons.adb),
),
),
);
}
}
此外，RaisedButton、OutlineButton、FlatButton都为我们提供了icon的构造函数。类似这样的效果。
class ButtonPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton.icon(
onPressed: () {},
icon: Icon(Icons.accessible),
label: Text('我是带icon的RaisedButton'),
),
),
);
}
}
外观参数说明
const RaisedButton({
Key key,
@required VoidCallback onPressed,// 点击事件，如果null，按钮禁用
ButtonTextTheme textTheme,// button 的主题设置
Color textColor,// 文字颜色
Color disabledTextColor,// 禁用态颜色
Color color,// 填充颜色
Color disabledColor,// 禁用颜色
Color focusColor,// 焦点颜色
Color hoverColor,// 悬浮颜色
Color highlightColor,// 高亮
Color splashColor,// 涟漪颜色
double elevation,// 阴影部分
double focusElevation,
double hoverElevation,
double highlightElevation,
double disabledElevation,
EdgeInsetsGeometry padding,// padding填充
ShapeBorder shape,// 外形
Widget child,
})按钮的自定义属性，相信大部分属性大家都知道怎么使用，这里不在赘述了。但是有一点需要注意，ButtonTextTheme这个属性，由于这个地方的属性容易相互覆盖，其中的关系会在后面theme主题系列文章中详细阐。
总结：flutter中button的基本用法和属性就先介绍到这里，接下来的文章会继续将常用Widget逐一介绍，在最后的系列中，会公开一个商业级的项目，感兴趣的小伙伴关注。如果您在阅读过程中发现错误，请及时留言给我，我会第一时间改正，争取不误导他人。感谢支持！