Flutter单选框和复选框[践]

Material 组件库中提供了Material风格的单选开关Switch和复选框Checkbox,虽然它们都是继承自StatefulWidget,但它们本身不会保存当前选中状态,选中状态都是由父组件来管理的。当Switch或Checkbox被点击时,会触发它们的onChanged回调,我们可以在此回调中处理选中状态改变逻辑。

单选框(Switch)

按钮都是有状态的,所以在创建模板的时候,一定要创建有状态的模板.

构造函数如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
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显示的是按钮里面的颜色
代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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

表示按钮未选中状态下按钮的颜色
代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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创建的,则忽略它。

复选框(Checkbox)

构造函数如下:

1
2
3
4
5
6
7
8
9
const Checkbox({
Key key,
@required this.value,
this.tristate = false,
@required this.onChanged,
this.activeColor,
this.checkColor,
this.materialTapTargetSize,
})

和单选框一样value和onChange都是必选的属性

属性解释

有些属性和单选框一样,所以就不赘述了,给个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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;
});
},
)
],
),
);
}
}

综述

通过Switch和Checkbox可以看到,虽然它们本身是与状态(是否选中)关联的,但它们却不是自己来维护状态,而是需要父组件来管理状态。可以在父组件中定义方法,来处理选中与未选中执行的代码逻辑