【Flutter】关于Button 的那些知识ElevatedButton等，以及Buttonstyle

---

前言

---

一、Button是什么？

按键，在flutter 中，有很多已经内置的button，合理的利用可以快速的开发，
但是ElevatedButton中，有一个Buttonstyle，配合起来可以创建自己需要的按钮样式，但是其实个人感觉运用起来有些复杂。

二、开始使用button

在一个app 中，肯定会出现按键widget的，这个也是运用很多的情况。

1.ElevatedButton

1.无style 的ElevatedButton

代码如下（示例）：

 ElevatedButton(
   onPressed: () {},
   child: const Text('ElevatedButton'),
1
2
3

2.基础功能的处理之后的button

鼠标悬停在按钮上面就改变颜色

      ElevatedButton(
              onPressed: () {
                debugPrint("I AM CLICK HERE");
              },
              onLongPress: () {
                debugPrint('I AM LONGPRESS');
              },
              //按钮的状态控制器，少用到
              // statesController: ,
              //抗锯齿功能
              clipBehavior: Clip.antiAlias,
              //焦点处理，使用不多
              focusNode: FocusNode(),
              //鼠标悬停的处理，一般在win 和mac的软件的时候处理
              onHover: (inhover) {
                if (inhover) {
                  _color = Colors.green;
                } else {
                  _color = Colors.red;
                }
                setState(() {});
              },
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: _color),
              ),
            )
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

3.利用buttonstyle 来美化下button

【Flutter】shape 属性 ShapeBorder，形状

    ElevatedButton(
              onPressed: () {
                debugPrint("I AM CLICK HERE");
              },
              onLongPress: () {
                debugPrint('I AM LONGPRESS');
              },
              //按钮的状态控制器，少用到
              // statesController: ,
              //抗锯齿功能
              clipBehavior: Clip.antiAlias,
            
              //焦点处理，使用不多
              focusNode: FocusNode(),
              style: ButtonStyle(
                  //背景颜色
                  backgroundColor: MaterialStateProperty.all(Colors.indigo),
                  //字体颜色
                  foregroundColor: MaterialStateProperty.all(Colors.white),
                  // 鼠标悬停的时候背景颜色
                  overlayColor: MaterialStateProperty.all(Colors.red),
                  //影音的颜色
                  shadowColor: MaterialStateProperty.all(Colors.yellow),
                  //表面颜色
                  surfaceTintColor: MaterialStateProperty.all(Colors.pink),
                  // 阴影值
                  elevation: MaterialStateProperty.all(10),
                  //内边距，文本同按钮边框的距离
                  // padding: MaterialStateProperty.all(const EdgeInsets.all(5)),
                  //最小值，尺寸不能再小于这个了
                  // minimumSize: MaterialStateProperty.all(const Size(10, 10)),
                  //边框的颜色和厚度
                  side: MaterialStateProperty.all(
                      const BorderSide(color: Colors.pink, width: 1.0)),
                  //形状
                  shape: MaterialStateProperty.all(
                    const BeveledRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(15)),
                        side: BorderSide(color: Colors.green, width: 1)),
                  ),
                  //鼠标的样式，当悬停的时候，鼠标要显示为什么样的样式，比如下面的鼠标就会显示为等待加载的样式
                  mouseCursor:
                      MaterialStateProperty.all(SystemMouseCursors.wait),
                  //视觉密度，就是按钮的紧凑性
                  visualDensity: VisualDensity.compact,
                  //触控区域,少用
                  tapTargetSize: MaterialTapTargetSize.padded,
                  //shap,eleation 改变的动画时间
                  animationDuration: const Duration(seconds: 1),
                  //检测到的手势是否应提供声学和/或触觉反馈。例如，在Android上，当启用反馈时，轻敲会产生咔哒声，长按会产生短暂的振动。
                  enableFeedback: true,
                  //child的位置，
                  alignment: Alignment.center,
                  //水波纹
                  splashFactory: InkRipple.splashFactory,
                  //字体样式
                  textStyle: MaterialStateProperty.all(
                      const TextStyle(fontWeight: FontWeight.bold))),

              child: const Text(
                'ElevatedButton',
              ),
            )
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

2.IconButton，TextButton基础功能都是一样的

带图标的按键：buttonstyle 同上面的说明是一样的；
isSelected: isSelect,//需要在themedata 里面设置useMaterial3: true

         IconButton(
              icon: const Icon(Icons.arrow_drop_down),
              isSelected: isSelect,//需要在themedata 里面设置useMaterial3: true
              selectedIcon: const Icon(Icons.arrow_drop_up),
              onPressed: () {
                isSelect = !isSelect;
                setState(() {});
              },
            ),
1
2
3
4
5
6
7
8
9

            IconButton(
                onPressed: () {
                  print("Pressed");

                  setState(() {});
                },

                // splashRadius: 0.2,
                splashColor: Colors.red,
                focusColor: Colors.indigo,
                hoverColor: Colors.yellow,
                highlightColor: Colors.purple,
                disabledColor: Colors.teal,
                // mouseCursor: SystemMouseCursors.allScroll,
                //尺寸限制
                // constraints:BoxConstraints() ,
                tooltip: 'this is a iconbutton',
                isSelected: true,
                selectedIcon: Icon(Icons.favorite),
                icon: Icon(Icons.adb_sharp))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、做几个好看点的按键

     ElevatedButton(
                onPressed: () {},
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.teal),
                    shadowColor: MaterialStateProperty.all(Colors.yellowAccent),
                    elevation: MaterialStateProperty.all(10)),
                child: const Text(
                  '开始',
                  style: TextStyle(color: Colors.white),
                )),
            ElevatedButton(
                onPressed: () {},
                clipBehavior: Clip.antiAlias,
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(const CircleBorder(
                        side: BorderSide(width: 1, color: Colors.pink))),
                    padding:
                        MaterialStateProperty.all(const EdgeInsets.all(10)),
                    overlayColor: MaterialStateProperty.all(Colors.white),
                    foregroundColor: MaterialStateProperty.all(Colors.black),
                    backgroundColor:
                        MaterialStateProperty.all(Colors.indigoAccent),
                    shadowColor: MaterialStateProperty.all(Colors.blueAccent),
                    elevation: MaterialStateProperty.all(10)),
                child: const Text(
                  '登陆',
                )),

            ElevatedButton(
                onPressed: () {},
                style: ButtonStyle(
                    minimumSize: MaterialStateProperty.all(
                        Size(MediaQuery.of(context).size.width, 40)),
                    foregroundColor: MaterialStateProperty.all(Colors.black),
                    backgroundColor: MaterialStateProperty.all(Colors.purple),
                    shadowColor: MaterialStateProperty.all(Colors.blueAccent),
                    elevation: MaterialStateProperty.all(10)),
                child: const Text(
                  '登陆',
                )),
            ElevatedButton(
                onPressed: () {},
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(
                        const BeveledRectangleBorder(
                            borderRadius: BorderRadius.all(Radius.circular(15)),
                            side: BorderSide(color: Colors.green, width: 1))),
                    minimumSize: MaterialStateProperty.all(
                        Size(MediaQuery.of(context).size.width, 40)),
                    foregroundColor: MaterialStateProperty.all(Colors.black),
                    backgroundColor: MaterialStateProperty.all(Colors.pink),
                    shadowColor: MaterialStateProperty.all(Colors.blueAccent),
                    elevation: MaterialStateProperty.all(10)),
                child: const Text(
                  '登陆',
                )),

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

总结

欢迎关注，留言，咨询，交流！