Flutter–Switch、SwitchListTile和CupertinoSwitch组件

b49866e9-bc3d-4ce6-a207-770904974339.gif

4.2、SwitchListTile的demo

class _SwitchFulState extends State<SwitchFul> {
  var eatState = false;
  var sleepState = false;
  var hitState = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("SwitchListTile学习"),
          ),
          body: Center(
            child: Column(
              children: [
                SwitchListTile(
                  value: eatState,
                  onChanged: (value) {
                    setState(() {
                      eatState = value;
                    });
                  },
                  activeColor: Colors.red,
                  activeTrackColor: Colors.blue,
                  inactiveThumbColor: Colors.yellow,
                  inactiveTrackColor: Colors.black,
                  title: Text("吃饭"),
                  subtitle: Text("是否现在吃饭"),
                  secondary: Image.network("https://www.itying.com/images/flutter/1.png"),
                ),
                SwitchListTile(
                  value: sleepState,
                  onChanged: (value) {
                    setState(() {
                      sleepState = value;
                    });
                  },
                  activeColor: Colors.red,
                  activeTrackColor: Colors.blue,
                  inactiveThumbColor: Colors.yellow,
                  inactiveTrackColor: Colors.black,
                  title: Text("睡觉"),
                  subtitle: Text("是否现在睡觉"),
                  secondary: Image.network("https://www.itying.com/images/flutter/2.png"),
                ),
                SwitchListTile(
                  value: hitState,
                  onChanged: (value) {
                    setState(() {
                      hitState = value;
                    });
                  },
                  activeColor: Colors.red,
                  activeTrackColor: Colors.blue,
                  inactiveThumbColor: Colors.yellow,
                  inactiveTrackColor: Colors.black,
                  title: Text("打豆豆"),
                  subtitle: Text("是否现在打豆豆"),
                  secondary: Image.network("https://www.itying.com/images/flutter/3.png"),
                ),
              ],
            )
          )),
    );
  }
}

2222.png

4.3、CupertinoSwitch的demo

class _SwitchFulState extends State<SwitchFul> {
  var eatState = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Switch学习"),
          ),
          body: Center(

              child:
                CupertinoSwitch(
                  value: eatState,
                  onChanged: (value){
                    setState(() {
                      eatState = value;
                    });
                  },
                  activeColor: Colors.red,
                  trackColor: Colors.blue,
                ),
          )),
    );
  }
}

2021.01.21.13.12.04.gif