Flutter--Switch、SwitchListTile和C

一、Switch、SwitchListTile和CupertinoSwitch介绍

Switch：material风格的开关组件

SwitchListTitle：Switch和ListTile组合控件，能够设置Switch的说明

CupertinoSwitch：ios风格的开关组件

二、Switch、SwitchListTile和CupertinoSwitch的源码介绍

2.1、Switch的源码

const Switch({
    Key key,
    @required this.value,//当前开关状态
    @required this.onChanged,//监听
    this.activeColor,//打开状态，轨道和按钮的颜色
    this.activeTrackColor,//打开状态，轨道颜色
    this.inactiveThumbColor,//关闭状态，按钮颜色
    this.inactiveTrackColor,//关闭状态，轨道颜色
    this.activeThumbImage,//打开状态，按钮图片
    this.onActiveThumbImageError,//activeThumbImage加载错误的调用
    this.inactiveThumbImage,//关闭状态，按钮图片
    this.onInactiveThumbImageError,//inactiveThumbImage加载错误的调用
    this.materialTapTargetSize,//配置tap目标的最小大小
    this.dragStartBehavior = DragStartBehavior.start,//
    this.mouseCursor,
    this.focusColor,
    this.hoverColor,
    this.focusNode,
    this.autofocus = false,
  })  : _switchType = _SwitchType.material,
        assert(dragStartBehavior != null),
        assert(activeThumbImage != null || onActiveThumbImageError == null),
        assert(inactiveThumbImage != null || onInactiveThumbImageError == null),
        super(key: key);

2.2、SwitchListTitle的源码

const SwitchListTile({
    Key key,
    @required this.value,//当前开关状态
    @required this.onChanged,//监听
    this.activeColor,//打开状态，轨道和按钮的颜色
    this.activeTrackColor,//打开状态，轨道颜色
    this.inactiveThumbColor,//关闭状态，按钮颜色
    this.inactiveTrackColor,//关闭状态，轨道颜色
    this.activeThumbImage,//打开状态，按钮图片
    this.inactiveThumbImage,//关闭状态，按钮图片
    this.title,//标题
    this.subtitle,//副标题
    this.isThreeLine = false,//是否三行显示
    this.dense,//是否密集垂直
    this.contentPadding,//内间距
    this.secondary,//配置图标或者图片
    this.selected = false,//text和ico 的color 是否 是 activeColor 的颜色
    this.autofocus = false,
    this.controlAffinity = ListTileControlAffinity.platform,
  }) : _switchListTileType = _SwitchListTileType.material,
       assert(value != null),
       assert(isThreeLine != null),
       assert(!isThreeLine || subtitle != null),
       assert(selected != null),
       assert(autofocus != null),
       super(key: key);

2.3、CupertinoSwitch的源码

const CupertinoSwitch({
    Key key,
    @required this.value,
    @required this.onChanged,
    this.activeColor,
    this.trackColor,
    this.dragStartBehavior = DragStartBehavior.start,
  }) : assert(value != null),
       assert(dragStartBehavior != null),
       super(key: key);

三、Switch、SwitchListTile和CupertinoSwitch的属性介绍

3.1、Switch的属性介绍

属性	说明
value	当前开关状态，bool类型
onChanged	监听
activeColor	打开状态，轨道和按钮的颜色
activeTrackColor	打开状态，轨道颜色
inactiveThumbColor	关闭状态，按钮颜色
inactiveTrackColor	关闭状态，轨道颜色
activeThumbImage	/打开状态，按钮图片
onActiveThumbImageError	activeThumbImage加载错误的调用
inactiveThumbImage	关闭状态，按钮图片
onInactiveThumbImageError	inactiveThumbImage加载错误的调用
materialTapTargetSize	配置tap目标的最小大小

3.2、SwitchListTitle的属性介绍

属性	说明
title	标题
subtitle	副标题
isThreeLine	是否三行显示
dense	是否密集垂直
contentPadding	内间距
secondary	配置图标或图片
selected	text和ico 的color 是否 是 activeColor 的颜色
其余属性	见Switch的属性介绍

3.3、CupertinoSwitch的属性介绍

属性	说明
trackColor	关闭状态背景色
activeColor	开启状态颜色
其余属性	见Switch的属性介绍

四、Switch、SwitchListTile和CupertinoSwitch的demo

4.1、Switch的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:Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Switch(
                  value: eatState,
                  onChanged: (value){
                    setState(() {
                      eatState = value;
                    });
                  },
                  activeColor: Colors.red,
                  activeTrackColor: Colors.blue,
                  inactiveThumbColor: Colors.yellow,
                  inactiveTrackColor: Colors.black,
                  //加载图片
                  activeThumbImage: NetworkImage("https://www.itying.com/images/flutter/1.png"),
                  //加载错误图片
//              activeThumbImage: NetworkImage("src"),
                  onActiveThumbImageError: (dynamics,stackTrace){
                    print("调用");
                  },
                  inactiveThumbImage: NetworkImage("https://www.itying.com/images/flutter/2.png"),
                  onInactiveThumbImageError: (dynamics,stackTrace){
                    print("加载关闭状态图片错误回调");
                  },


                ),
                Text("吃饭")
              ],
            )
          )),
    );
  }
}

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