Flutter 按钮介绍 CupertinoButton、TextButton、ElevatedButton、OutlinedButton、IconButton

Button效果一览

1 CupertinoButton

CupertinoButton 是iOS风格的按钮，需要注意的是它的minSize是44，一般需要按需求来修改。

带线框的按钮

    CupertinoButton(
      padding: EdgeInsets.zero,
      child: Container(
        height: 40,
        width: 160,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.red),
          borderRadius: const BorderRadius.all(Radius.circular(20)),
        ),
        child: const Text(
          'CupertinoButton',
          style: TextStyle(color: Colors.red),
        ),
      ),
      onPressed: () {},
    )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Icon按钮

    CupertinoButton(
      child: const Icon(CupertinoIcons.arrow_right_arrow_left),
      onPressed: () {},
    )
1
2
3
4

背景填充的按钮

    CupertinoButton.filled(
      minSize: 40,
      padding: const EdgeInsets.symmetric(horizontal: 32),
      borderRadius: const BorderRadius.all(Radius.circular(20)),
      child: const Text('Filled'),
      onPressed: () {},
    )
1
2
3
4
5
6
7

三种方式的效果图

---

2 TextButton

TextButton 是Android风格的文本按钮，带有水波纹效果。支持点击和长按事件。

无背景有Icon的按钮

  TextButton.icon(
    onPressed: () {},
    label: const Text('TextButton.icon'),
    icon: const Icon(Icons.text_fields),
  )
1
2
3
4
5

背景填充的按钮

  TextButton(
    onPressed: () {},
    onLongPress: () {},
    // 按钮样式
    style: ButtonStyle(
      //设置按钮背景颜色
      backgroundColor: MaterialStateProperty.all(Colors.red),
      //设置水波纹颜色
      overlayColor: MaterialStateProperty.all(Colors.red[300]),
      //设置按钮的大小
      minimumSize: MaterialStateProperty.all(const Size(double.infinity, 44)),
      //设置形状 圆角 半径为8
      shape: MaterialStateProperty.all(
        const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(8)),
        ),
      ),
    ),
    child: const Text(
      "TextButton",
      style: TextStyle(color: Colors.white, fontSize: 17),
    ),
  )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

带线框的按钮

  TextButton(
    onPressed: () {},
    onLongPress: () {},
    // 按钮样式
    style: ButtonStyle(
      //定义文本的样式 这里设置的颜色是不起作用的
      textStyle: MaterialStateProperty.all(const TextStyle(fontSize: 18)),
      //设置字体颜色
      foregroundColor: MaterialStateProperty.resolveWith((states) {
        //设置按下时的背景颜色
        if (states.contains(MaterialState.pressed)) {
          return Colors.white;
        }
        //默认不使用背景颜色
        return Colors.red;
      }),
      //设置水波纹颜色
      overlayColor: MaterialStateProperty.all(Colors.red[200]),
      //设置按钮的大小
      minimumSize: MaterialStateProperty.all(const Size(double.infinity, 44)),
      //设置形状
      shape: MaterialStateProperty.all(const StadiumBorder()),
      //设置线框
      side: MaterialStateProperty.all(
          const BorderSide(color: Colors.red, width: 1)),
    ),
    child: const Text("TextButton"),
  )
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

效果图

3 ElevatedButton

ElevatedButton 是Android风格的按钮，具有立体感、阴影效果，可设置elevation Z轴高度。支持点击和长按事件。

背景填充、圆角、具有立体感有阴影、elevation Z轴高度10

  ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      primary: Colors.red,
      elevation: 10,
      textStyle: const TextStyle(fontSize: 18),
    ),
    child: const Text('ElevatedButton'),
  )
1
2
3
4
5
6
7
8
9

背景填充、两边为圆形、无立体感无阴影、elevation Z轴高度0

  ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      primary: Colors.red,
      elevation: 0,
      minimumSize: const Size(0, 40),
      shape: const StadiumBorder(),
      textStyle: const TextStyle(fontSize: 18),
    ),
    child: const Text('ElevatedButton'),
  )
1
2
3
4
5
6
7
8
9
10
11

线框按钮、两边为圆形、无立体感无阴影、elevation Z轴高度0

  ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      primary: Colors.white,
      elevation: 0,
      minimumSize: const Size(0, 40),
      shape: const StadiumBorder(),
      padding: const EdgeInsets.symmetric(horizontal: 32),
      side: const BorderSide(color: Colors.red, width: 1),
    ),
    child: const Text(
      'ElevatedButton',
      style: TextStyle(fontSize: 18, color: Colors.red),
    ),
  )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果图

---

4 OutlinedButton

OutlinedButton与TextButton基本一致，只是默认具有边框，修改style属性即可实现TextButton的效果。

  OutlinedButton(
    onPressed: () {},
    style: const ButtonStyle(),
    child: const Text("OutlinedButton"),
  );
1
2
3
4
5

5 IconButton

IconButton 是Android风格的用于Icon的按钮，具有圆形范围的点击效果。Flutter还提供了CloseButton和BackButton等快捷实现的IconButton。

  IconButton(
    tooltip: '我是飞机',
    onPressed: () {},
    icon: const Icon(CupertinoIcons.airplane),
  )
1
2
3
4
5

效果

6 为Widget添加点击事件

除了使用上述Button Widget，还可以使用InkWell或GestureDetector来为子Widget添加点击事件。

• InkWell 具有Android风格的点击效果
• GestureDetector 无点击效果

  InkWell(
    onLongPress: () {},
    onDoubleTap: () {},
    onTap: () {},
    child: const Text('InkWell'),
  )
1
2
3
4
5
6

  GestureDetector(
    behavior: HitTestBehavior.opaque,
    onLongPress: () {},
    onDoubleTap: () {},
    onTap: () {},
    child: const Text('GestureDetector'),
  )
1
2
3
4
5
6
7