文章已同步至掘金：https://juejin.cn/post/6844903957207187470
欢迎访问😃，有任何问题都可留言评论哦~
单选框(Switch)
因为按钮都是有状态的，所以在创建模板的时候，一定要创建有状态的模板（使用快捷键stf创建），复选按钮也一样
但是这些按钮本身不会保存当前选择状态，因此它们的选中状态都是由父组件来管理的。
但是当你点击的时候会触发他们的onChange函数，我们可以在此函数中处理代码逻辑。
源码示例
构造函数如下：
const Switch({
Key key,
@required this.value,
@required this.onChanged,
this.activeColor,
this.activeTrackColor,
this.inactiveThumbColor,
this.inactiveTrackColor,
this.activeThumbImage,
this.inactiveThumbImage,
this.materialTapTargetSize,
this.dragStartBehavior = DragStartBehavior.start,
})
其中value和onChange是必选属性
属性解释
value
即按钮当前的状态是选中还是不选中，值为true或者false
onChanged
当按钮改变状态时，代码的执行逻辑
activeColor、 activeTrackColor
这两个属性都是在按钮选中状态下显示按钮的颜色
activeColor显示的是按钮的颜色
activeTrackColor显示的是按钮里面的颜色
代码示例：
class _CategoryPageState extends State<CategoryPage> {
bool _switchSelected = true; //维护单选开关状态
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Switch(
value: _switchSelected, //当前状态，必填
onChanged: (value) { //必填，改变状态后执行的代码逻辑
//重新构建页面
setState(() {
_switchSelected = value;
});
},
activeColor:Colors.red, //选中后按钮的颜色，默认是蓝色
activeTrackColor:Colors.yellow, //选中后按钮里面的颜色
),
],
),
);
}
}
运行效果：
inactiveThumbColor、inactiveTrackColor
表示按钮未选中状态下按钮的颜色
代码示例：
class _CategoryPageState extends State<CategoryPage> {
bool _switchSelected = true; //维护单选开关状态
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Switch(
value: _switchSelected, //当前状态，必填
onChanged: (value) { //必填
//重新构建页面
setState(() {
_switchSelected = value;
});
},
activeColor:Colors.red, //选中后按钮的颜色，默认是蓝色
activeTrackColor:Colors.yellow, //选中后按钮里面的颜色
inactiveThumbColor:Colors.pink, //未选中按钮的颜色
inactiveTrackColor:Colors.green, ////未选中按钮里面的颜色
),
],
),
);
}
}
运行效果：
activeThumbImage、inactiveThumbImage
当该开关打开或者关闭时在该开关的大拇指上使用的图像。
如果这个开关是用switch创建的，则忽略它。
一般不使用，不做过多介绍
materialTapTargetSize
配置点击目标的最小大小,参数有padded、shrinkWrap和value
代码示例：
class _CategoryPageState extends State<CategoryPage> {
bool _switchSelected = true; //维护单选开关状态
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Switch(
value: _switchSelected, //当前状态，必填
onChanged: (value) { //必填
//重新构建页面
setState(() {
_switchSelected = value;
});
},
activeColor:Colors.red, //选中后按钮的颜色，默认是蓝色
activeTrackColor:Colors.yellow, //选中后按钮里面的颜色
inactiveThumbColor:Colors.pink, //未选中按钮的颜色
inactiveTrackColor:Colors.green, ////未选中按钮里面的颜色
materialTapTargetSize:MaterialTapTargetSize.shrinkWrap, //配置点击目标的最小大小,参数有padded和shrinkWrap
// activeThumbImage 当该开关打开时在该开关的大拇指上使用的图像。如果这个开关是用[switch .adaptive]创建的，则忽略它。
),
],
),
);
}
}
运行效果：
复选框(Checkbox)
和单选框一样，也需要创建有状态的模板（用stf快捷键创建）
源码示例
构造函数如下：
const Checkbox({
Key key,
@required this.value,
this.tristate = false,
@required this.onChanged,
this.activeColor,
this.checkColor,
this.materialTapTargetSize,
})
和单选框一样value和onChange都是必选的属性
属性解释
有些属性和单选框一样，所以就不赘述了，给个例子：
class _CategoryPageState extends State<CategoryPage> {
bool _checkboxSelected = true; //维护复选框状态
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Checkbox(
value: _checkboxSelected,
activeColor: Colors.red, //选中时的颜色
checkColor:Colors.green, //选中时里面对号的颜色
onChanged: (value) {
setState(() {
_checkboxSelected = value;
});
},
)
],
),
);
}
}
运行效果：
tristate
这个属性表示是否为三态，其默认值为false ，这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false 。如果tristate值为true时，value的值会增加一个状态null。
总述：
通过Switch和Checkbox可以看到，虽然它们本身是与状态（是否选中）关联的，但它们却不是自己来维护状态，而是需要父组件来管理状态。可以在父组件中定义方法，来处理选中与未选中执行的代码逻辑
评论区