Flutter开发过程中会遇见各种各样的Button,比如FlatButton,RaisedButton,IconButton等,刚开始的时候可能会比较迷惑,应该选择哪一种来实现我们的效果。

按钮的设计

我们先从Material 的设计文档看看:

常见的按钮分为4种: image.png

  • 文本按钮(Text Button)
  • 轮廓按钮(Outlined Button)
  • 容器按钮(Contained Button)
  • 切换按钮(Toggle Button)

其中每个按钮都有一个必须的元素(文本)和若干个可选的元素(比如icon,轮廓等)。

image.png

按钮点击之后都会有特定的效果,这些按钮在不同状态下的样式也有所不同。

文本按钮

文本按钮

轮廓按钮

轮廓按钮

容器按钮

容器按钮默认是带有阴影(shadow)和层次感(elevation)的。

容器按钮

切换按钮

切换按钮在移动端开发中并不是很常见,Web中可能比较常见:

切换按钮的使用

来看看它的几种状态:

切换按钮

看完了设计规范,再来看看Flutter提供的几种内置Button:

FlatButton : 文本按钮

FlatButton对应的是文本按钮,基本用法如下:

    final flatButtons = Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            FlatButton(onPressed: () {}, child: Text("FlatButton")),
            FlatButton(onPressed: null, child: Text("Disabled")),
            FlatButton.icon(
                onPressed: () {}, icon: Icon(Icons.check), label: Text("Icon"))
          ],
        ),
      ),
    );

OutlineButton : 轮廓按钮

OutlineButton对应的是轮廓按钮,基本用法如下:

    final outlineButtons = Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            OutlineButton(
              onPressed: () {},
              child: Text("OutlineButton"),
            ),
            OutlineButton(
              onPressed: null,
              child: Text("Disabled"),
            ),
            OutlineButton.icon(
                onPressed: () {}, icon: Icon(Icons.info), label: Text("Icon"))
          ],
        ),
      ),
    );

RaisedButton : 容器按钮

image.png

RaisedButton对应的是容器按钮,基本用法如下:

    final raisedButtons = Container(
      padding: EdgeInsets.all(8.0),
      height: 60,
      child: ListView(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          RaisedButton(
            onPressed: () {},
            child: Text("RaisedButton"),
          ),
          SizedBox(width: 10),
          RaisedButton(
            onPressed: null,
            child: Text("Disabled"),
          ),
          SizedBox(width: 10),
          RaisedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.favorite_border),
              label: Text("Icon")),
          SizedBox(width: 10),
          RaisedButton(
            onPressed: () {},
            textColor: Colors.white,
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(colors: [
                  Color(0xFF0D47A1),
                  Color(0xFF1976D2),
                  Color(0xFF42A5F5),
                ]),
              ),
              child: Text("Gradient", style: TextStyle(fontSize: 20)),
            ),
          )
        ],
      ),
    );

ToggleButtons : 切换按钮

ToggleButtons对应切换按钮,基本用法如下:

    final toggleButtons = Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: ToggleButtons(onPressed: (index) {}, children: <Icon>[
            Icon(Icons.ac_unit),
            Icon(Icons.call),
            Icon(Icons.cake),
          ], isSelected: [
            false,
            true,
            false
          ]),
        ),
      ),
    );

IconButton

IconButton是一个只有Icon的Button,基本用法如下:


    final iconButtons = Card(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
          IconButton(icon: Icon(Icons.favorite), onPressed: null),
        ],
      ),
    );

Demo