Flutter-Button

普通按钮（共同的属性见代码区）

  • TextButton（文本按钮）
  • ElevatedButton（凸起按钮）
  • OutlinedButton（轮廓按钮）

图标按钮

  • IconButton
    • tooltip:长按提示
  • TextButton.icon()
  • ElevatedButton.icon()
  • OutlinedButton.icon()

按钮组

  • ButtonBar

浮动按钮

  • FloatingActionButton：要放在scaffold中，与appbar和body同级

回退按钮

  • BackButton

关闭按钮

  • CloseButton

代码区

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Work'),
        leading: const Icon(Icons.menu),
        actions: const[Icon(Icons.settings)],
      ),
      body: const MyPage(),
      floatingActionButton: FloatingActionButton(//悬浮按钮要放在Scaffold中，与appbar和body同级
        tooltip: "挖草",
        backgroundColor: Colors.orange,
        onPressed: (){
          if(kDebugMode){
            print("FloatingActionButton");
          }
        },
        child: const Icon(Icons.live_tv),//悬浮按钮中的子组件，放个icon图片
      ),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Container(
      padding: const EdgeInsets.all(2),
      child: Wrap(
        children: [
          TextButton(
            style: const ButtonStyle(
            ),
            onPressed: (){
              if (kDebugMode) {
                print("TextButton");
              }
            },
            child: const Text(
              "TextButton",
              style: TextStyle(
                  fontSize: 25
              ),
            ),
          ),
          ElevatedButton(
            onPressed: (){
              if(kDebugMode){
                print("ElevatedButton");
              }
            },
            child: const Text("ElevatedButton"),
          ),
          OutlinedButton(
            style:  ButtonStyle(//按钮的样式
              minimumSize: MaterialStateProperty.all(const Size(400,40)),//按钮最小的尺寸，按钮通常根据内容决定尺寸，故可以设定最小尺寸来决定按钮大小
              foregroundColor: MaterialStateProperty.resolveWith((states){
                if(states.contains(MaterialState.pressed)){//当按钮的状态处于按压时
                  return Colors.red;//前景色给出红色
                }
              }),
              backgroundColor: MaterialStateProperty.all(Colors.orange),
              side: MaterialStateProperty.all(const BorderSide(
                width: 3,
                color: Colors.green
              )),
              shape: MaterialStateProperty.all(const StadiumBorder()),//给个形状就行了，边框的颜色和宽度由side来决定
              // overlayColor: MaterialStateProperty.all(Colors.brown),
            ),
            onPressed: (){
              if(kDebugMode) {
                print("OutlinedButton");
              }
            },
            child: const Text(
                "OutlinedButton",
                style: TextStyle(
                  color: Colors.white
                ),
            ),
          ),
          IconButton(
            tooltip: "小辣鸡",//长按提示
              onPressed: (){
                if(kDebugMode){
                  print("IconButton");
                }
              },
              icon: const Icon(Icons.favorite,color: Colors.red,)
          ),
          TextButton.icon(
              onPressed: (){
                if(kDebugMode){
                  print("TextButton.icon");
                }
              },
              icon: const Icon(Icons.person),
              label: const Text("Khvia")),
        ],
      ),
    );
  }
}

效果图