共计 989 个字符,预计需要花费 3 分钟才能阅读完成。
此动画成果是我在浏览文章时发现的一个十分酷炫的成果,于是就应用 Flutter 实现了。
更多动画成果及 Flutter 资源:https://github.com/781238222/flutter-do
增加依赖
在我的项目的 pubspec.yaml
文件中增加依赖:
dependencies:
wheel_switch: ^0.0.1
执行命令:
flutter pub get
应用
WheelSwitch(value: false,)
组件默认的宽高别离是 80、30,也能够指定宽高:
WheelSwitch(
value: false,
width: 150,
height: 50,
)
开关发生变化回调:
WheelSwitch(
value: false,
onChanged: (value){print('WheelSwitch : $value');
},
)
设置其轨道色彩,分为激活(开)和未激活(关)状态的色彩:
WheelSwitch(
value: false,
width: 150,
height: 50,
activeTrackColor: Colors.red,
inactiveTrackColor: Colors.green,
)
设置滑块的色彩:
WheelSwitch(
value: false,
width: 150,
height: 50,
activeTrackColor: Colors.red,
inactiveTrackColor: Colors.green,
activeThumbColor: Colors.blue,
inactiveThumbColor: Colors.green,
)
未激活状态(关):
激活状态(开):
设置文字和文字款式:
WheelSwitch(
value: false,
width: 150,
height: 50,
activeText: '开',
inactiveText: '关',
activeTextStyle: TextStyle(color: Colors.white,fontSize: 20),
inactiveTextStyle: TextStyle(color: Colors.cyanAccent,fontSize: 10),
)
交换
老孟 Flutter 博客(330 个控件用法 + 实战入门系列文章):http://laomengit.com
欢送退出 Flutter 交换群(微信:laomengit)、关注公众号【老孟 Flutter】:
正文完