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

Flutter 常用Widget-按钮

猜你喜欢