《Flutter 控件大全》第九十一:Switch、SwitchListTile、CupertinoSwitch
程序员文章站
2022-03-11 19:16:10
...
- 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
- 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
- Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
Switch
Switch为material风格的开关组件,基本用法如下:
var _switchValue = false;
_buildSwitch(){
return Switch(
value: _switchValue,
onChanged: (value){
setState(() {
_switchValue = value;
});
},
);
}
效果如下:
设置**状态下thumb及track颜色,用法如下:
Switch(
activeColor: Colors.red,
activeTrackColor: Colors.blue,
...
)
效果如下:
注意红色区域为thumb,蓝色区域为track。
thumb区域也可以设置图片,用法如下:
Switch(
activeThumbImage: AssetImage('images/bird.png',),
...
)
效果如下:
有**状态样式的设置,也有未**样式的设置,用法如下:
Switch(
inactiveThumbColor: Colors.black54,
inactiveThumbImage: AssetImage('images/bird.png',),
inactiveTrackColor: Colors.blue,
...
)
SwitchListTile
SwitchListTile是Switch和ListTile组合控件,基本用法如下:
var _switchValue = false;
_buildSwitch(){
return SwitchListTile(
title:Text('是否允许4G下载'),
value: _switchValue,
onChanged: (value){
setState(() {
_switchValue = value;
});
},
);
}
效果如下:
所有的属性都是Switch和ListTile属性的组合,可到具体控件查看其属性。
CupertinoSwitch
CupertinoSwitch是ios风格控件,用法和Switch一样,用法如下:
var _switchValue = false;
_buildSwitch(){
return CupertinoSwitch(
value: _switchValue,
onChanged: (value){
setState(() {
_switchValue = value;
});
},
);
}
效果如下: