3 Flutter按钮组件Button

Flutter中给我们定义好了很多按钮控件，感觉比Android的丰富多了。常用的按钮主要是下面几种：

• RaisedButton ：具有凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton
• FlatButton ：扁平化的按钮，继承自MaterialButton
• OutlineButton ：带边框的按钮，继承自MaterialButton
• IconButton ：图标按钮,继承自StatelessWidget
  下面我们就这几种按钮的使用简单介绍一下。

1 RaisedButton

上面提到，RaisedButton继承MaterialButton，所以MateralButton中的属性，其继承者都具有。

1.1 RaisedButton构造方法

代码如下：

 const RaisedButton({
    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  })

1.2 主要属性

属性	作用
onPressed	必填参数，按下按钮时触发的回调，接收一个方法，传null表示按钮禁用，会显示禁用相关样式
onHighlightChanged	高亮变化监听
textTheme	控制文本主题 ButtonTextTheme.normal: 文本颜色为黑色或白色,取决于ThemeData.brightness，可在MaterialApp下设置theme:ThemeData(brightness: Brightness.light);黑暗模式或高亮模式ButtonTextTheme.accent: 文本颜色取决于ThemeData.accentColor ButtonTextTheme.primary:文本颜色基于ThemeData.primaryColor*设置ThemeData.primaryColor按钮文本一直为黑色
textColor	文本颜色
disabledTextColor	禁止使用时按钮文本的颜色
color	按钮的颜色
disabledColor	禁止使用时按钮颜色
highlightColor	点击（长按）按钮后按钮的颜色
splashColor	点击按钮时水波纹的颜色
colorBrightness	按钮的主题亮度，当设置了textColor、color颜色，此值无效!未设置textColor、color颜色时可使用Brightness.dark与Brightness.light
elevation	阴影的范围，值越大阴影范围越大
disabledElevation	按钮不可点击时阴影扩散范围
padding	内边距
shape	设置按钮的形状
Clip clipBehavior	剪裁内容 - Clip.hardEdge /Clip.antiAlias /Clip.antiAliasWithSaveLayer /Clip.none
animationDuration	水波纹动画持续时间 例如：Duration(milliseconds: 300) //持续300ms
child	按钮的child通常为一个Text文本组件，用来显示按钮的文本

1.3 代码示例

1.3.1 RaisedButtonWidget代码

import 'package:flutter/material.dart';

///* project_name：flutter_widgets_app
///* author： laohe
///* date： 2021/1/2
///*/
class RaisedButtonWidget extends StatefulWidget {
  @override
  State<RaisedButtonWidget> createState() => _RaisedButtonWidgetState();
}

class _RaisedButtonWidgetState extends State<RaisedButtonWidget> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('按钮RaisedButton Widget实例'),
        ),
        body: Container(
            child: ListView(children: <Widget>[
          RaisedButton(
            child: Text('普通按钮'),
            onHighlightChanged: (bool b) {
              print(b);
            },
            onPressed: () {
              print('普通按钮 点击我了');
            },
          ),
          RaisedButton(
            child: Text('带颜色'),
            onPressed: () {},
            textColor: Colors.white,
            color: Colors.blue[200],
          ),
          RaisedButton(
            child: Text('带颜色带阴影'),
            onPressed: () {},
            textColor: Colors.white,
            color: Colors.blue[200],
            elevation: 15,
          ),
          Container(
            width: 300,
            height: 50,
            child: RaisedButton(
              child: Text('设置宽高'),
              onPressed: () {},
              textColor: Colors.white,
              color: Colors.blue[500],
              elevation: 15,
            ),
          ),
          RaisedButton.icon(
            icon: Icon(Icons.account_box),
            label: Text('我前边有图标'),
            onPressed: () {},
          ),
          RaisedButton(
            child: Text('圆角按钮'),
            onPressed: () {},
            color: Colors.red,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          ),
          Container(
            width: 100,
            height: 100,
            child: RaisedButton(
                child: Text('圆形按钮'),
                onPressed: () {},
                color: Colors.red,
                shape: CircleBorder(
                    // side: BorderSide(color: Colors.yellow[500])
                    )),
          ),
          RaisedButton(
            child: Text('水波纹'),
            onPressed: () {},
            color: Colors.blue[200],
            splashColor: Colors.yellow[100],
          ),
          RaisedButton(
            child: Text('长按变色'),
            onPressed: () {},
            color: Colors.blue[200],
            highlightColor: Colors.red[500],
          ),
        ])));
  }
}

1.3.2 运行效果

2 FlatButton

2.1 FlatButton构造方法

由于FlatButton同样继承MaterialButton，所以MaterialButton的所有属性，FlatButton都具有。FlatButton构造方法代码如下：

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,
  })

2.2 FlatButton属性

FlatButton跟RaisedButton用法基本一致

属性	说明
focusNode
materialTapTargetSize

其它属性参考RaisedButton属性说明

2.3 代码示例

2.3.1 FlatButtonWidget代码

import 'package:flutter/material.dart';

///
/// project_name：flutter_widgets_app
/// author： laohe(老贺)
/// date： 2021/1/2
///
class FlatButtonWidget extends StatefulWidget {
  @override
  State<FlatButtonWidget> createState() => _FlatButtonWidgetState();
}

class _FlatButtonWidgetState extends State<FlatButtonWidget> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlatButtonWidget实例'),
      ),
      body: Container(
        padding: EdgeInsets.all(20),
          child: ListView(
        children: [
          FlatButton(
            onPressed: () {},
            child: Text("普通扁平按钮"),
            color: Colors.blue,
            textColor: Colors.white,
          ),
          FlatButton(
            onPressed: () {},
            child: Text("扁平按钮-带边框"),
            color: Colors.blue,
            textColor: Colors.black,
            shape: RoundedRectangleBorder(
                side: BorderSide(
                  color: Colors.red,
                  width: 1,
                ),
                borderRadius: BorderRadius.circular(8)),
          ),
          FlatButton(
            onPressed: () {},
            child: Text("扁平按钮-顶端斜角"),
            color: Colors.blue,
            textColor: Colors.white,
            shape: BeveledRectangleBorder(
                side: BorderSide(
                    color: Colors.red, width: 1.0, style: BorderStyle.solid),
                borderRadius: BorderRadius.all(Radius.circular(12.0))),
          ),
          Container(
            width: 100,
            height: 100,
            child: FlatButton(
                onPressed: () {},
                child: Text("扁平按钮-圆形"),
                color: Colors.blue,
                textColor: Colors.white,
                shape: CircleBorder(
                    side: BorderSide(
                        color: Colors.blue,
                        width: 3.0,
                        style: BorderStyle.solid))),
          ),
          FlatButton(
              onPressed: () {},
              child: Text("扁平按钮-圆角"),
              color: Colors.blue,
              textColor: Colors.white,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  side: BorderSide(
                      color: Colors.red,
                      width: 1.0,
                      style: BorderStyle.solid))),
          FlatButton(
              onPressed: () {},
              child: Text("扁平按钮-半圆角"),
              color: Colors.blue,
              textColor: Colors.white,
              shape: StadiumBorder(
                  side: BorderSide(
                      color: Colors.red,
                      width: 1.0,
                      style: BorderStyle.solid))),
        ],
      )),
    );
  }
}

2.3.2 运行效果

3 OutlineButton

3.1 OutlineButton构造方法

const OutlineButton({
    Key key,
    @required VoidCallback onPressed,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    double highlightElevation,
    this.borderSide,
    this.disabledBorderColor,
    this.highlightedBorderColor,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior,
    FocusNode focusNode,
    Widget child,
  })

3.2 OutlineButton属性

OutlineButton是一个有默认边线且背景透明的按钮，也就是说我们设置其边线和颜色是无效的，其他属性跟MaterialButton中属性基本一致。

注意：OutlineButton控件的child 和 onPressed是必须的属性，borderSide用来自定义边框颜色和样式。

具体可以参考RaisedButton属性说明

3.3 示例代码

3.3.1 OutlineButtonWidget代码

import 'package:flutter/material.dart';

///
/// project_name：flutter_widgets_app
/// author： laohe(老贺)
/// date： 2021/1/2
///
class OutlineButtonWidget extends StatelessWidget {
  OutlineButtonWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('OutlineButtonWidget实例'),
        ),
        body: Container(
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              //图标线框按钮
              OutlineButton.icon(
                  onPressed: () {},
                  icon: Icon(
                    Icons.adb,
                    size: 28.0,
                    color: Colors.green,
                  ),
                  label: Text('图标线框按钮')),
              //文字线框按钮
              OutlineButton(
                child: Text('线框按钮'),
                onPressed: () {},
                //按钮背景色-没什么效果
                color: Colors.green,
                //按下时的边框色
                highlightedBorderColor: Colors.orange,
                //按下时的背景色
                highlightColor: Colors.orange,
                //失效时的边框颜色（当onPressed为null时即为失效状态）
                disabledBorderColor: Colors.grey,
                //失效时的文字颜色（当onPressed为null时即为失效状态）
                disabledTextColor: Colors.black,
                //文字颜色
                textColor: Colors.black,
                //按钮主题 ButtonTheme ButtonThemeData ButtonTextTheme ThemeData
                textTheme: ButtonTextTheme.normal,
                //墨汁飞溅的颜色、水波纹的颜色
                splashColor: Colors.red,
                //抗锯齿能力
                clipBehavior: Clip.antiAlias,
                //内边距
                padding:
                    EdgeInsets.only(bottom: 5.0, top: 5.0, left: 20, right: 20),
                //边框样式  shape也能设置，borderSide也能设置，borderSide更适合于OutlineButton。
                borderSide: BorderSide(color: Colors.pink, width: 3.0),
                //边框样式，矩形
                // shape:Border.all(
                //   width: 2.0,
                //   color: Colors.green,
                //   style: BorderStyle.solid
                // ),
                //圆角矩形样式
                // shape: RoundedRectangleBorder(
                //     side: BorderSide(
                //         width: 2.0,
                //         color: Colors.white,
                //         style: BorderStyle.solid),
                //     borderRadius: BorderRadius.only(
                //       topRight: Radius.circular(10.0),
                //       topLeft: Radius.circular(10.0),
                //       bottomLeft: Radius.circular(10.0),
                //       bottomRight: Radius.circular(10.0),
                //     )),
              )
            ],
          ),
        ));
  }
}

3.3.2 运行效果

4 IconButton

图标组件（Icon）为展示图标的组件，该组件不可交互，要实现交互的图标，可以考虑使用IconButton组件。图标组件相关的组件有一下几个：

• IconButton：可交互的Icon。
• Icons：框架自带Icon集合。
• IconTheme：Icon主题。
• ImageIcon：通过AssetImages或者其他图片显示Icon。

4.1 IconButton构造方法

const IconButton({
    Key key,
    this.iconSize = 24.0,
    this.padding = const EdgeInsets.all(8.0),
    this.alignment = Alignment.center,
    @required this.icon,
    this.color,
    this.focusColor,
    this.hoverColor,
    this.highlightColor,
    this.splashColor,
    this.disabledColor,
    @required this.onPressed,
    this.focusNode,
    this.tooltip,
  })

4.2 IconButton属性

属性	说明
Widget icon	图标
double iconSize	图标大小
AlignmentGeometry alignment	图标对齐方式 Alignment.center: 居中对齐，默认。 Alignment.topLeft Alignment.topCenter Alignment.topRight Alignment.centerLeft Alignment.centerRight Alignment.bottomLeft Alignment.bottomCenter Alignment.bottomRight 或使用Alignment(double x, double y):以中心为原点Alignment(-1.0, 1.0)对应Alignment.topLeft
String tooltip	提示信息，按钮长按可显示,显示1500ms

4.3 代码示例

4.3.1 IconButtonWidget代码

import 'package:flutter/material.dart';

class IconButtonWidget extends StatelessWidget {
  IconButtonWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('IconButtonWidget实例'),
        ),
        body: Container(
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              ///普通Icon，无文字
              Icon(
                Icons.qr_code,
              ),
              Divider(height: 20),
              ///普通Icon，有文字
              Icon(
                Icons.backspace,
                color: Colors.blue,
                textDirection: TextDirection.ltr,
              ),
              Divider(height: 20),
              ///加载本地Icon，设置颜色和大小
              ImageIcon(
                AssetImage('images/test.png'),
                color: Colors.red,
                size: 50,
              ),
              Divider(height: 20),
              ///IconButton，设置文字按钮，颜色和大小，点击效果
              IconButton(
                onPressed: () {},
                icon: getTextRich(),
                color: Colors.blue,
                iconSize: 50,
                highlightColor: Color(0x991B5E20),
                splashColor: Color(0x990D47A1),
                disabledColor: Color(0xFF0D47A1),
                tooltip: "I is IconButton tooltip",
              ),
              Divider(height: 20),
              ///IconButton，设置本地图片按钮，大小，点击效果
              IconButton(
                onPressed: () {},
                icon: Image.asset(
                  'images/test.png',
                  matchTextDirection: false,
                  fit: BoxFit.fitWidth,
                ),
                iconSize: 50,
                highlightColor: Color(0x991B5E20),
                splashColor: Color(0x990D47A1),
                disabledColor: Color(0xFF0D47A1),
              ),
              Divider(height: 20),
              ///Image.asset，本地图片
              Image.asset(
                'images/test.png',
                matchTextDirection: false,
                fit: BoxFit.fitWidth,
              )
            ],
          ),
        ));
  }

  Widget getTextRich() {
    List children = new List<TextSpan>();
    children.add(TextSpan(text: "老贺", style: TextStyle(color: Colors.black)));
    children
        .add(TextSpan(text: "IconButton", style: TextStyle(color: Colors.red)));
    children.add(TextSpan(text: "study", style: TextStyle(color: Colors.blue)));
    TextSpan textSpan = new TextSpan(children: children);
    return Text.rich(
      textSpan,
    );
  }
}

4.3.2 运行效果

结束语

这里把Button相关按钮基本介绍完了，不过除了上面介绍的4中常用的按钮之外，Flutter还提供了ButtonBar按钮组、FloatingActionButton浮动按钮等等，还有很多按钮可能需要我们自定义才可以满足需求。但是无论什么样的按钮属性基本相通，大家只要掌握基本属性就可以组合成各种各样的按钮展示效果，由于篇幅有限上面的代码示例也仅仅展示了一些常用的属性，所以学习完之后需要在项目中锻炼才可以真正掌握和灵活运用。

文章中源码已经放到github上，下载地址如下：
github项目源码