复选框

复选框允许用户从列表中选择一个或多个项目。您可能使用复选框来让用户执行以下操作

打开或关闭项目。
从列表中的多个选项中进行选择。
表示同意或接受。

解剖学

复选框包含以下元素

框：这是复选框的容器。
选中标记：这是显示复选框是否选中的视觉指示器。
标签：这是描述复选框的文本。

状态

复选框可以处于三种状态之一

未选中：复选框未选中。框为空。
不确定：复选框处于不确定状态。框中包含一个短划线。
选中：复选框已选中。框中包含一个复选标记。

以下图片演示了复选框的三种状态。

An example of a checkbox component in each of its three states: unselected, selected, and indeterminate. — **图 1.** 复选框的三种状态。未选中、不确定和选中。

实施

您可以使用 Checkbox 可组合项在您的应用中创建复选框。只需记住几个关键参数

checked：捕获复选框是否选中或未选中的布尔值。
onCheckedChange()：用户点击复选框时应用调用的函数。

以下代码片段演示了如何使用 Checkbox 可组合项

@Composable
fun CheckboxMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            "Minimal checkbox"
        )
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it }
        )
    }

    Text(
        if (checked) "Checkbox is checked" else "Checkbox is unchecked"
    )
}Checkbox.kt

解释

此代码创建一个最初未选中的复选框。当用户点击复选框时，onCheckedChange lambda 会更新 checked 状态。

结果

此示例在未选中时生成以下组件

An unchecked checkbox with a label. The text beneath it reads 'Checkbox is unchecked' — **图 2.** 未选中的复选框

当选中时，同一个复选框的外观如下

A checked checkbox with a label. The text beneath it reads 'Checkbox is checked' — **图 3.** 选中的复选框

高级示例

以下是您如何在应用中实现复选框的更复杂的示例。在此代码段中，有一个父复选框和一系列子复选框。当用户点击父复选框时，应用会选中所有子复选框。

@Composable
fun CheckboxParentExample() {
    // Initialize states for the child checkboxes
    val childCheckedStates = remember { mutableStateListOf(false, false, false) }

    // Compute the parent state based on children's states
    val parentState = when {
        childCheckedStates.all { it } -> ToggleableState.On
        childCheckedStates.none { it } -> ToggleableState.Off
        else -> ToggleableState.Indeterminate
    }

    Column {
        // Parent TriStateCheckbox
        Row(
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text("Select all")
            TriStateCheckbox(
                state = parentState,
                onClick = {
                    // Determine new state based on current state
                    val newState = parentState != ToggleableState.On
                    childCheckedStates.forEachIndexed { index, _ ->
                        childCheckedStates[index] = newState
                    }
                }
            )
        }

        // Child Checkboxes
        childCheckedStates.forEachIndexed { index, checked ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text("Option ${index + 1}")
                Checkbox(
                    checked = checked,
                    onCheckedChange = { isChecked ->
                        // Update the individual child state
                        childCheckedStates[index] = isChecked
                    }
                )
            }
        }
    }

    if (childCheckedStates.all { it }) {
        Text("All options selected")
    }
}Checkbox.kt

解释

以下是一些您应从此示例中注意到的要点

状态管理:
- childCheckedStates：使用 mutableStateOf() 的布尔值列表，用于跟踪每个子复选框的选中状态。
- parentState：一个 ToggleableState，其值派生自子复选框的状态。
UI 组件:
- TriStateCheckbox：对于父复选框是必需的，因为它有一个 state 参数，允许您将其设置为不确定。
- Checkbox：用于每个子复选框，其状态与其在 childCheckedStates 列表中的对应元素相关联。
- Text：显示标签和消息（“全选”、“选项 X”、“所有选项已选中”）。
逻辑:
- 父复选框的 onClick 将所有子复选框更新为当前父状态的反面。
- 每个子复选框的 onCheckedChange 会更新其在 childCheckedStates 列表中的对应状态。
- 当所有子复选框都被选中时，代码会显示“所有选项已选中”。

结果

当所有复选框都未选中时，此示例会生成以下组件。

A series of unchecked labeled checkboxes with a label. — **图 4.** 未选中的复选框

同样，当用户点击全选时，组件在所有选项都被选中时，外观如下

A series of checked labeled checkboxes checkbox with a label. The first is marked 'select all'. There is a text component beneath them that reads 'all options selected.' — **图 5.** 选中的复选框

当只有一个选项被选中时，父复选框会显示不确定状态

A series of unchecked labeled checkboxes checkbox with a label. All but one is unchecked. The checkbox labeled 'select all' is indeterminate, displaying a dash. — **图 6.** 不确定的复选框

其他资源

Material Design 复选框