1. 基本介绍
Switch 是一个常见的选择器。
2. 示例代码
代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。
3. Switch 属性介绍
| Switch属性 | 介绍 |
|---|---|
| value | @required bool，value = true 时为打开状态，false 关闭 |
| onChanged | 点击事件 |
| activeColor | 打开状态下滑块颜色 |
| activeTrackColor | 打开状态下轨道颜色 |
| inactiveThumbColor | 关闭状态下滑块颜色 |
| inactiveTrackColor | 关闭状态下轨道颜色 |
| activeThumbImage | 打开状态下滑块图片 |
| onActiveThumbImageError | 打开状态下滑块图片加载失败回调 |
| inactiveThumbImage | 关闭状态下滑块图片 |
| onInactiveThumbImageError | 关闭状态下滑块图片加载失败回调 |
| materialTapTargetSize | 内边距，默认最小点击区域为 48 * 48，MaterialTapTargetSize.shrinkWrap 为组件实际大小 |
| dragStartBehavior | 启动阻力，默认为 DragStartBehavior.start |
| mouseCursor | 鼠标光标 |
| focusColor | 聚焦颜色 |
| hoverColor | 悬停颜色 |
| focusNode | 焦点控制，Flutter 组件之 FocusNode 详解 |
| autofocus | 自动聚焦，默认为 false |
4. Switch 详解
4.1 容器创建
import 'package:flutter/material.dart';
class FMSwitchVC extends StatefulWidget{
@override
FMSwitchState createState() => FMSwitchState();
}
class FMSwitchState extends State {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("Switch"),),
body: Center(
child: _switch(),
),
);
}
bool switchValue = true;
Switch _switch(){
return Switch(
value: switchValue,
onChanged: (value){
switchValue = !switchValue;
setState(() {
});
}
);
}
}
4.2 点击事件
使用 onChanged 捕捉点击事件，并对状态进行记录，更新控件，完成一个可以反复点击的效果。
Switch normal.gif
4.3 颜色
Switch _switch(){
return Switch(
value: switchValue,
activeColor: Colors.red,
activeTrackColor: Colors.blue,
inactiveThumbColor: Colors.yellow,
inactiveTrackColor: Colors.cyan,
onChanged: (value){
switchValue = !switchValue;
print(value);
setState(() {
});
}
);
}
| 颜色 | 效果 |
|---|---|
| activeColor | (打开时滑块颜色 Colors.red)
Switch activeColor.png
|
| activeTrackColor | (打开时轨道颜色 Colors.blue)
Switch activeTrackColor.png
|
| inactiveThumbColor | (关闭时滑块颜色 Colors.yellow)
Switch inactiveThumbColor.png
|
| inactiveTrackColor | (关闭时轨道颜色 Colors.cyan)
Switch inactiveTrackColor.png
|
4.4 图片
不会导入、使用图片的请看这里，Flutter入门（9）：Flutter 组件之 Image、AssetImage 详解
Switch _switch(){
return Switch(
value: switchValue,
activeColor: Colors.red,
activeTrackColor: Colors.blue,
inactiveThumbColor: Colors.yellow,
inactiveTrackColor: Colors.cyan,
activeThumbImage: AssetImage('images/base_widgets/bear_white.png'),
inactiveThumbImage: AssetImage('images/base_widgets/bear_brown.png'),
onChanged: (value){
switchValue = !switchValue;
print(value);
setState(() {
});
}
);
}
| 图片 | 效果 |
|---|---|
| activeThumbImage |
Swtich activeThumbImage.png
|
| inactiveThumbImage |
Switch inactiveThumbImage.png
|
4.5 图片错误回调
onActiveThumbImageError 与 onInactiveThumbImageError 分别是选中和未选中状态下，滑块图片错误回调。一般来说本地图片不会有什么问题，当加载网络图片时，有时候就会出现这个问题。
我们来给 activeThumbImage 与 inactiveThumbImage 两个错误的网络地址，当拿不到正确的图片时，就会走错误回调了。
Switch _switch(){
return Switch(
value: switchValue,
activeColor: Colors.red,
activeTrackColor: Colors.blue,
inactiveThumbColor: Colors.yellow,
inactiveTrackColor: Colors.cyan,
activeThumbImage: NetworkImage("https://activeThumbImage"),
inactiveThumbImage: NetworkImage("https://inactiveThumbImage"),
// activeThumbImage: AssetImage('images/base_widgets/bear_white.png'),
// inactiveThumbImage: AssetImage('images/base_widgets/bear_brown.png'),
onActiveThumbImageError: (error, stack){
print("onActiveThumbImageError = $error");
},
onInactiveThumbImageError: (error, stack){
print("onInactiveThumbImageError = $error");
},
onChanged: (value){
switchValue = !switchValue;
print(value);
setState(() {
});
}
);
}
当点击 Switch 时，会有如下报错
flutter: onInactiveThumbImageError = SocketException: Failed host lookup: 'inactivethumbimage' (OS Error: nodename nor servname provided, or not known, errno = 8)
flutter: onActiveThumbImageError = SocketException: Failed host lookup: 'activethumbimage' (OS Error: nodename nor servname provided, or not known, errno = 8)
Switch errors.png
5. 技术小结
Switch 控件的应用场景不是特别多，多加练习很容易掌握。