本节目标

常用按钮操作

  • FlatButton（扁平化）
  • RaisedButton（有按下状态）
  • OutlineButton（有边框）
  • MaterialButton（Material 风格）
  • RawMaterialButton（没有应用 style 的 Material 风格按钮）
  • FloatingActionButton（悬浮按钮）

Button

在 Flutter 中 Button 有很多封装好的 Widget 类：

  • FlatButton（扁平化）
  • RaisedButton（有按下状态）
  • OutlineButton（有边框）
  • MaterialButton（Material 风格）
  • RawMaterialButton（没有应用 style 的 Material 风格按钮）
  • FloatingActionButton（悬浮按钮）
  • BackButton（返回按钮）
  • IconButton（Icon 图标）
  • CloseButton（关闭按钮）
  • ButtonBar（可以排列放置按钮元素的）

其中大部分的 Button 都是基于 RawMaterialButton 进行的修改定制而成的。

  • 构造函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const FlatButton({
    Key key,
    // 点击事件
    @required VoidCallback onPressed,
    // 高亮改变，按下和抬起时都会调用的方法
    ValueChanged<bool> onHighlightChanged,
    // 定义按钮的基色，以及按钮的最小尺寸，内部填充和形状的默认值
    ButtonTextTheme textTheme,
    // 按钮文字的颜色
    Color textColor,
    // 按钮禁用时的文字颜色
    Color disabledTextColor,
    // 按钮背景颜色
    Color color,
    // 按钮禁用时的背景颜色
    Color disabledColor,
    // 按钮按下时的背景颜色
    Color highlightColor,
    // 点击时，水波动画中水波的颜色，不要水波纹效果设置透明颜色即可
    Color splashColor,
    // 按钮主题，默认是浅色主题，分为深色和浅色
    Brightness colorBrightness,
    // 按钮的填充间距
    EdgeInsetsGeometry padding,
    // 外形
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    MaterialTapTargetSize materialTapTargetSize,
    // 按钮的内容，里面可以放子元素
    @required Widget child,
  })

示例

  • 后退、关闭
1
2
3
4
5
6
7
8
ButtonBar(
  children: <Widget>[
    BackButton(
      color: Colors.orange,
    ),
    CloseButton(),
  ],
),
  • 扁平按钮 FlatButton
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ButtonBar(
  children: <Widget>[
    FlatButton(
      child: Text('扁平按钮'),
      onPressed: () {
        print('我是扁平按钮');
      },
    ),
    FlatButton(
      child: Text(
        '扁平按钮 禁用',
      ),
      onPressed: null,
    ),
  ],
),
  • 扁平带图标按钮 FlatButton.icon
1
2
3
4
5
6
7
8
9
10
11
12
13
14
ButtonBar(
  children: <Widget>[
    FlatButton.icon(
      label: Text('带图标扁平按钮'),
      icon: Icon(Icons.add_call, size: 18.0),
      onPressed: () {},
    ),
    FlatButton.icon(
      icon: const Icon(Icons.add_call, size: 18.0),
      label: const Text('带图标扁平按钮 禁用'),
      onPressed: null,
    ),
  ],
),
  • 带框按钮 OutlineButton
1
2
3
4
5
6
7
8
9
10
11
12
ButtonBar(
  children: <Widget>[
    OutlineButton(
      onPressed: () {},
      child: Text('带框按钮'),
    ),
    OutlineButton(
      onPressed: null,
      child: Text('带框按钮 禁用'),
    ),
  ],
),
  • 带框图标按钮 OutlineButton.icon
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ButtonBar(
  children: <Widget>[
    OutlineButton.icon(
      label: Text('带框图标按钮'),
      icon: Icon(Icons.add_to_photos, size: 18.0),
      onPressed: () {},
    ),
    OutlineButton.icon(
      disabledTextColor: Colors.orange,
      icon: Icon(Icons.add_to_photos, size: 18.0),
      label: Text('带框图标按钮 禁用'),
      onPressed: null,
    ),
  ],
),
  • 立体按钮 RaisedButton
1
2
3
4
5
6
7
8
9
10
11
12
ButtonBar(
  children: <Widget>[
    RaisedButton(
      child: Text('立体按钮'),
      onPressed: () {},
    ),
    RaisedButton(
      child: Text('立体按钮 禁用'),
      onPressed: null,
    ),
  ],
),
  • 立体按钮带图标 RaisedButton.icon
1
2
3
4
5
6
7
8
9
10
11
12
13
14
ButtonBar(
  children: <Widget>[
    RaisedButton.icon(
      icon: Icon(Icons.add, size: 18.0),
      label: Text('立体按钮带图标'),
      onPressed: () {},
    ),
    RaisedButton.icon(
      icon: Icon(Icons.add, size: 18.0),
      label: Text('立体按钮带图标 禁用'),
      onPressed: null,
    ),
  ],
),
  • Material 按钮 MaterialButton
1
2
3
4
5
6
7
8
9
10
11
12
13
14
ButtonBar(
  children: <Widget>[
    MaterialButton(
      child: Text('Material按钮'),
      onPressed: () {
        // Perform some action
      },
    ),
    MaterialButton(
      child: Text('Material按钮 禁用'),
      onPressed: null,
    ),
  ],
),
  • RawMaterial 按钮 RawMaterialButton
1
2
3
4
5
6
7
8
9
10
11
12
13
14
ButtonBar(
  children: <Widget>[
    RawMaterialButton(
      child: Text('RawMaterial按钮'),
      onPressed: () {
        // Perform some action
      },
    ),
    RawMaterialButton(
      child: Text('RawMaterial按钮 禁用'),
      onPressed: null,
    ),
  ],
),
  • 浮动按钮 FloatingActionButton
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ButtonBar(
  children: <Widget>[
    FloatingActionButton(
      child: const Icon(Icons.add),
      heroTag: '浮动按钮',
      onPressed: () {
        // Perform some action
      },
      tooltip: '浮动按钮提示1',
    ),
    FloatingActionButton(
      child: const Icon(Icons.add),
      onPressed: null,
      heroTag: '浮动按钮 禁用',
      tooltip: '浮动按钮提示2',
    ),
  ],
),

代码

https://github.com/ducafecat/flutter-learn/blob/master/button_widget

参考

© 猫哥

https://ducafecat.tech