一、RaisedButton

RaisedButton 是 Flutter 提供的 Material 风格的按钮 Widget,如果你的 APP 是基于 Material 风格设计的(因为我并非特别喜欢 Material,相反更喜欢 apple 的设计风格),可以直接使用它作为你的页面的主要 Button Widget

构造函数如下:

onPressed 属性虽然是必传的,但是可以传递 null 值,如果传递了 null 值,整个按钮是不可点击的,disabled 状态,下面有示例。

  const RaisedButton({
    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,
    double elevation,
    double focusElevation,
    double hoverElevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior,
    FocusNode focusNode,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  })

从扩展函数中可以看出, RaisedButton 支持配置非常多的属性,来实现不同的 Button 需求

1、普通 Button 及背景颜色控制、阴影控制

RaisedButton(
  child: Text('普通按钮'),
  onPressed: () {},
),
RaisedButton(
  color: Colors.pink,
  textColor: Colors.white,
  child: Text('颜色按钮'),
  onPressed: () {},
),
RaisedButton(
  elevation: 20,
  focusElevation: 40,
  child: Text('阴影按钮'),
  onPressed: () {},
),

效果:

91609-vseq48pag9.png

2、控制 Button 的宽度和高度

RaisedButton 本身不支持宽度和高度的属性控制,如果要指定宽度和高度,可以借助 Container Widget,指定 Container 宽度和高度即可同时控制 Button 宽度和高度

Container(
  width: 300,
  height: 50,
  child: RaisedButton(
    child: Text('宽度高度按钮'),
    onPressed: () {},
  ),
),

效果:

14755-w8ji1q0ia8.png

3、宽度自适应按钮

某些场景下,我们可能期望一个全屏宽度的按钮出现,或者 Button 充满整个屏幕宽度。

和宽度高度的控制一样,我们需要借助 RowExpanded 来使得 Button 自适应

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        height: 50,
        child: RaisedButton(
          child: Text('自适应宽度按钮'),
          onPressed: () {},
        ),
      ),
    )
  ],
),

效果:

56697-0m6bwzcxejl9.png

4、图标按钮和不可点击状态按钮

如果按钮使用的构造函数是 RaisedButton.icon

Row(
  children: <Widget>[
    RaisedButton.icon(
      color: Colors.pink,
      textColor: Colors.white,
      icon: Icon(Icons.search),
      label: Text('图标按钮'),
      onPressed: () {},
    ),
    RaisedButton.icon(
      color: Colors.pink,
      textColor: Colors.white,
      icon: Icon(Icons.search),
      label: Text('不可点击'),
      onPressed: null,
    ),
  ],
),

结果:

90092-y53araqvmin.png

5、圆角按钮

圆角按钮是本身 RasedButton 本身可以通过 shape 属性控制的,shape 属性支持传入 RoundedRectangleBorder 并且指定 RoundedRectangleBorder.borderRadius 的值,比如 BorderRadius.circular(25)

RaisedButton(
  child: Text('圆角按钮'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(25),
  ),
  onPressed: () {},
),

6、圆形按钮

圆形按钮简单的也可以借助 RaisedButton.shape 来实现,本身 shape 支持传入的属性是 ShapeBorder 即可,而 CircleBorder 也是继承自 ShapeBorder

比如我的实现:

RaisedButton(
  child: Text('圆'),
  shape: CircleBorder(
    side: BorderSide(color: Colors.pink),
  ),
  onPressed: () {},
),

效果:

18614-vpzt9nysxxj.png

当然,存在一个问题,如果字数太多了,在使用 CircleBorder 就存在问题了:

86329-ddmv7z4jind.png

这种情况下,一般按钮的宽度和高度也是需要相对应增加的,但是上面已经说了,只能借助 Container 指定 RaisedButton 的宽度和高度,然后在 Container 中的 RaisedButton 指定 shape 属性为 CircleBorder ,并设置值即可。

Container(
  height: 80,
  child: RaisedButton(
    child: Text('圆形按钮'),
    shape: CircleBorder(
      side: BorderSide(color: Colors.pink),
    ),
    onPressed: () {},
  ),
),

效果:

52882-o755fkivaf.png

七、控制按钮波纹

通过 splashColor 可以指定 RaisedButton 的波纹,这是 Materia Design 按钮的默认表现形式

RaisedButton(
  splashColor: Colors.pink,
  child: Text('波纹'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(25),
  ),
  onPressed: () {},
),

效果:

GIF.gif

二、完整代码:

https://github.com/postbird/FlutterHelloWorldDemo/blob/master/demo1/lib/bak/main.35-RasiedButton.dart