Compose笔记(九)--Checkbox
这一节主要了解一下Compose中的Checkbox,它是Jetpack Compose UI框架中的一个组件,用于创建复选框功能。它允许用户从一个集合中选择一个或多个项目,可以将一个选项打开或关闭。与传统的Android View系统中的Checkbox相比,Compose中的Checkbox更注重状态的变化,而不包含文本部分。
常用属性
1. checked
用于指定 CheckBox 的当前选中状态,类型为 Boolean。
2. onCheckedChange
是一个 (Boolean) -> Unit 类型的回调函数,当用户点击 CheckBox 时会触发该回调,并将新的选中状态作为参数传递进来。
3. enabled
类型为 Boolean,用于控制 CheckBox 是否可点击。当设置为 false 时,CheckBox 变为不可用状态,用户无法点击它。
4. colors
用于自定义 CheckBox 在不同状态下的颜色,通过 CheckboxDefaults.colors 方法可以设置选中颜色、未选中颜色、勾选标记颜色等。
栗子:
// 自定义颜色
@Composable
fun CustomColorCheckBoxExample() {
var checkedState by remember { mutableStateOf(false) }
Column(
modifier = Modifier,
horizontalAlignment = Alignment.CenterHorizontally
) {
Checkbox(
checked = checkedState,
onCheckedChange = { checkedState = it },
colors = CheckboxDefaults.colors(
checkedColor = Color.Green,
uncheckedColor = Color.Red,
checkmarkColor = Color.White
)
)
Text(text = if (checkedState) "Checked" else "Unchecked"
, modifier = Modifier.padding(start = 6.dp))
}
}
//自定义icon
@Composable
fun CustomIconCheckBoxExample() {
var checkedState by remember { mutableStateOf(false) }
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
Icon(
imageVector = if (checkedState) Icons.Default.Check else Icons.Default.Close,
contentDescription = null,
tint = if (checkedState) Color.Green else Color.Red,
modifier = Modifier
.size(30.dp)
.clickable { checkedState = !checkedState }
)
}
}
//自定义大小
@Composable
fun CustomSizeCheckBoxExample() {
var checkedState by remember { mutableStateOf(false) }
Column(
modifier = Modifier,
horizontalAlignment = Alignment.CenterHorizontally
) {
Checkbox(
checked = checkedState,
onCheckedChange = { checkedState = it },
modifier = Modifier.size(30.dp)
)
Text(text = if (checkedState) "Checked" else "Unchecked")
}
}
全选/反选
data class Option(val id: Int, val name: String, var isChecked: Boolean = false)
@Composable
fun CheckBoxWithSelectAll() {
val options = remember { mutableListOf(
Option(1, "选项1"),
Option(2, "选项2"),
Option(3, "选项3")
) }
var isAllChecked by remember { mutableStateOf(false) }
Column {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(8.dp)
) {
Checkbox(
checked = isAllChecked,
onCheckedChange = {
isAllChecked = it
options.forEach { option -> option.isChecked = it }
}
)
Text(text = "全选", modifier = Modifier.padding(start = 8.dp))
}
options.forEach { option ->
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(8.dp)
) {
Checkbox(
checked = option.isChecked,
onCheckedChange = {
option.isChecked = it
isAllChecked = options.all { opt -> opt.isChecked }
}
)
Text(text = option.name, modifier = Modifier.padding(start = 8.dp))
}
}
}
}
注意:
1 布局适配,Checkbox 本身没有直接设置大小的属性,但可以通过 Modifier.size 来调整其大小。
2 点击事件处理,onCheckedChange 回调用于处理 CheckBox 的点击事件。确保在回调中执行的操作不会阻塞主线程,避免影响用户体验。例如,如果需要在点击时进行网络请求或复杂计算,应该使用协程等异步方式处理。