1 Switch 与 Checkbox 的共有属性配置说明
activeColor → Color - 激活时原点的颜色。
activeThumbImage → ImageProvider - 原点还支持图片,激活时的效果。
activeTrackColor → Color - 激活时横条的颜色。
inactiveThumbColor → Color - 非激活时原点的颜色。
inactiveThumbImage → ImageProvider - 非激活原点的图片效果。
inactiveTrackColor → Color - 非激活时横条的颜色。
onChanged → ValueChanged - 改变时触发。
value → bool - 切换按钮的值。
在接下来的文章篇幅中将定义两个变量来维护开关的状态以及复选框的状态,如下所示:
bool _switchSelected = false; //维护单选开关状态
bool _checkboxSelected = false; //维护复选框状态
2 开关 Switch
Switch(
//当前状态
value: _switchSelected,
// 激活时原点颜色
activeColor: Colors.blue,
inactiveTrackColor: Colors.blue.shade50,
onChanged: (value) {
//重新构建页面
setState(() {
_switchSelected = value;
});
},
)
3 IOS 风格的 CupertinoSwitch
CupertinoSwitch(
value: _switchSelected,
onChanged: (value) {},
),
4 SwitchListTile
SwitchListTile 是将 开关 Switch 、文本 Text 、还有图标水平线性排列的便捷组件
new SwitchListTile(
secondary: const Icon(Icons.shutter_speed),
title: const Text('硬件加速'),
value: _switchSelected,
onChanged: (bool value) {
setState(() {
_switchSelected = !_switchSelected;
});
},
),
5 复选框 Checkbox
Checkbox(
value: _checkboxSelected,
//选中时的颜色
activeColor: Colors.red,
onChanged: (value) {
setState(() {
_checkboxSelected = value;
});
},
)
6 CheckboxListTile
CheckboxListTile(
secondary: const Icon(Icons.shutter_speed),
title: const Text('硬件加速'),
value: _checkboxSelected,
onChanged: (bool value) {
setState(() {
_checkboxSelected = !_checkboxSelected;
});
},
),