Flutter FlatButton 、OutlineButton 、IconButton 、ButtonBar（按钮组）和自定义按钮

一、FlatButton

之前写过一篇关于 RaisedButton 的文章，RaisedButton 是标准的 Material Design 的 Button 风格设计，文章地址如下：

http://www.ptbird.cn/flutter-raisedbutton-flatbutton.html

FlatButton 没有 RaisedButton 默认的阴影，因此看起来是扁平化的。

构造函数如下：

  const FlatButton({
    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior,
    FocusNode focusNode,
    MaterialTapTargetSize materialTapTargetSize,
    @required Widget child,
  })

1、FlatButton 按钮使用

FlatButton(
  color: Colors.pink,
  textColor: Colors.white,
  child: Text('扁平按钮'),
  onPressed: () {},
),

效果：

二、OutlineButton 边框按钮

OutlineButton 允许我们给 Button 指定 Border 并且设置 Border 的样式：

OutlineButton(
  child: Text('边框按钮'),
  onPressed: () {},
),
OutlineButton(
  borderSide: BorderSide(color: Colors.pink),
  child: Text('边框按钮'),
  onPressed: () {},
),

效果：

三、IconButton 图标按钮

IconButton 与使用 FlatButton 或者 RaisedButton 不同的一点是 IconButton 默认实现了高度和宽度的设置，并且是一个圆形的 Button。

这点从 IconButton 的 build 即可以看出：

    Widget result = ConstrainedBox(
      constraints: const BoxConstraints(minWidth: _kMinButtonSize, minHeight: _kMinButtonSize),
      child: Padding(
        padding: padding,
        child: SizedBox(
          height: iconSize,
          width: iconSize,
          child: Align(
            alignment: alignment,
            child: IconTheme.merge(
              data: IconThemeData(
                size: iconSize,
                color: currentColor,
              ),
              child: icon,
            ),
          ),
        ),
      ),
    );

因此在使用 Icon Button 的时候我们既可以通过 Icon.size 控制图标大小，也能够控制 padding 属性

IconButton(
  splashColor: Colors.pink,
  color: Colors.pink,
  icon: Icon(Icons.search),
  onPressed: () {},
),
IconButton(
  splashColor: Colors.pink,
  color: Colors.pink,
  padding: EdgeInsets.all(0),
  icon: Icon(Icons.search),
  onPressed: () {},
)

效果：

三、ButtonBar 按钮组

ButtonBar 可以默认实现一个按钮组，通过 children 属性可以传入多个 Button

而 ButtonBar 内部其实也是基于 Row 实现的，我们自己也可以自己去实现按钮组

ButtonBar(
  children: <Widget>[
    RaisedButton(
      color: Colors.pink,
      textColor: Colors.white,
      child: Text('按钮组'),
      onPressed: () {},
    ),
    FlatButton(
      color: Colors.pink,
      textColor: Colors.white,
      child: Text('按钮组'),
      onPressed: () {},
    )
  ],
)

效果：

四、自定义按钮

所谓的 自定义按钮 其实就是自己封装一次，比如 IconButton 也是一个自定义按钮，无非是框架封装了一层。

比如自己实现一个 PrimaryButton ：

class PrimayButton extends StatelessWidget {
  final String text;
  final onPressed;
  PrimayButton({Key key, this.text, this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlatButton(
        color: Colors.blue,
        textColor: Colors.white,
        disabledColor: Colors.blue[100],
        disabledTextColor: Colors.white54,
        child: Text(this.text),
        onPressed: this.onPressed,
      ),
    );
  }
}

自定义按钮很大程度上是封装了几种属性，并且将一些属性暴露出去，可以透传进来。

自定义按钮的使用：

Row(
  children: <Widget>[
    PrimayButton(
      text: '自定义按钮',
      onPressed: () {
        print('自定义按钮自定义按钮');
      },
    ),
    PrimayButton(
      text: '自定义按钮',
    )
  ],
)

效果：

五、完整代码

https://github.com/postbird/FlutterHelloWorldDemo/blob/master/demo1/lib/bak/main.36-FlatButton-IconButton-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%89%E9%92%AE.dart

文章已经结束啦

Postbird