当前位置：首页 > news >正文

Compose笔记(九)--Checkbox

news 来源：原创 2025/8/17 4:46:55

这一节主要了解一下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 = itoptions.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 = itisAllChecked = options.all { opt -> opt.isChecked }})Text(text = option.name, modifier = Modifier.padding(start = 8.dp))}}}
}

注意：

1 布局适配，Checkbox 本身没有直接设置大小的属性，但可以通过 Modifier.size 来调整其大小。

2 点击事件处理,onCheckedChange 回调用于处理 CheckBox 的点击事件。确保在回调中执行的操作不会阻塞主线程，避免影响用户体验。例如，如果需要在点击时进行网络请求或复杂计算，应该使用协程等异步方式处理。

相关文章：