button按钮的属性设置_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逐一介绍，在最后的系列中，会公开一个商业级的项目，感兴趣的小伙伴关注。如果您在阅读过程中发现错误，请及时留言给我，我会第一时间改正，争取不误导他人。感谢支持！