一、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 {
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 {
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 {
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