FLUTTER学习笔记--按钮

---

一、IconButton

• IconButton

• IconButton

• TextButton（扁平按钮）.icon（）

• ElevatedButton（漂浮按钮）.icon（）

• OutlinedButton（线框按钮）.icon（）

二、ButtonBar（按钮组）

三、FloatingActionButton（浮动按钮）

四、BackButton（回退按钮）

五、代码

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("learn1"),
        leading: Icon(Icons.menu),
        actions: [Icon(Icons.settings)],
        elevation: 10.0,
        centerTitle: true,
      ),
      body: ButtonDemo(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(CupertinoIcons.add),
        backgroundColor: Colors.green,
        elevation: 0,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(10),
        child: Wrap(children: [
          ElevatedButton(
            onPressed: () {
              print('点击ElevatedButton');
            },
            onLongPress: () {
              print('长按ElevatedButton');
            },
            child: Text("漂浮按钮"),
          ),
          TextButton(
            onPressed: () {
              print('点击TextButton');
            },
            onLongPress: () {
              print('长按TextButton');
            },
            child: Text("扁平按钮"),
          ),
          OutlinedButton(
            onPressed: () {
              print('点击OutlinedButton');
            },
            onLongPress: () {
              print('长按OutlinedButton');
            },
            child: Text("线框按钮"),
            style: ButtonStyle(
                textStyle: MaterialStateProperty.all(TextStyle(fontSize: 30)),
                foregroundColor: MaterialStateProperty.resolveWith((states) {
                  if (states.contains(MaterialState.pressed)) {
                    //按下按钮时的颜色
                    return Colors.yellow;
                  }
                  //默认状态的颜色
                  return Colors.blue;
                }),
                backgroundColor: MaterialStateProperty.resolveWith((states) {
                  if (states.contains(MaterialState.pressed)) {
                    //按下按钮时的颜色
                    return Colors.yellow;
                  }
                  //默认状态的颜色
                  return Colors.white;
                }),
                shadowColor: MaterialStateProperty.all(Colors.yellow),
                elevation: MaterialStateProperty.all(20),
                side: MaterialStateProperty.all(
                    BorderSide(color: Colors.green, width: 2)),
                //声明按钮形状
                shape: MaterialStateProperty.all(StadiumBorder(
                    side: BorderSide(color: Colors.green, width: 2))),
                //设置按钮大小
                minimumSize: MaterialStateProperty.all(Size(200, 100)),
                //设置水波纹的颜色
                overlayColor: MaterialStateProperty.all(Colors.purple)),
          ),
          OutlinedButtonTheme(
            data: OutlinedButtonThemeData(
                style: ButtonStyle(
                    overlayColor: MaterialStateProperty.all(Colors.red))),
            child: OutlinedButton(
              onPressed: () {
                print('点击OutlinedButton');
              },
              onLongPress: () {
                print('长按OutlinedButton');
              },
              child: Text("线框按钮"),
              style: ButtonStyle(
                  overlayColor: MaterialStateProperty.all(Colors.blue)),
            ),
          ),
          IconButton(
            onPressed: () {
              print("点击IconButton");
            },
            icon: Icon(Icons.home),
            color: Colors.red,
            splashColor: Colors.lightBlue,
            highlightColor: Colors.purple,
            tooltip: '怎么了',
          ),
          TextButton.icon(
              onPressed: () {},
              icon: Icon(CupertinoIcons.add_circled),
              label: Text('扁平按钮')),
          ElevatedButton.icon(
              onPressed: () {},
              icon: Icon(CupertinoIcons.add_circled),
              label: Text('漂浮按钮')),
          OutlinedButton.icon(
              onPressed: () {},
              icon: Icon(CupertinoIcons.add_circled),
              label: Text('线框按钮')),
          Container(
            color: Colors.pink[100],
            width: double.infinity,
            child: ButtonBar(
              children: [
                ElevatedButton(onPressed: () {}, child: Text('按钮一')),
                ElevatedButton(onPressed: () {}, child: Text('按钮二')),
                ElevatedButton(onPressed: () {}, child: Text('按钮三')),
                ElevatedButton(onPressed: () {}, child: Text('按钮四')),
                ElevatedButton(onPressed: () {}, child: Text('按钮五')),
              ],
            ),
          ),
          BackButton(
            color: Colors.red,
            onPressed: () {},
          ),
          CloseButton(
            color: Colors.red,
            onPressed: () {},
          )
        ]));
  }
}

六、效果