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

Compose笔记(九)--Checkbox

news 来源：原创 2025/5/22 2:49:47

这一节主要了解一下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 的点击事件。确保在回调中执行的操作不会阻塞主线程，避免影响用户体验。例如，如果需要在点击时进行网络请求或复杂计算，应该使用协程等异步方式处理。