チェックボックス

チェックボックスを使用すると、ユーザーがリストから 1 つ以上のアイテムを選択できます。チェックボックスを使用して、ユーザーが次の操作を行うことができます。

• アイテムをオンまたはオフにします。
• リスト内の複数のオプションから選択します。
• 同意または同意を示す。

構造

チェックボックスは、次の要素で構成されます。

• Box: チェックボックスのコンテナです。
• Check: チェックボックスのオン / オフを示す視覚的なインジケーターです。
• ラベル: チェックボックスを説明するテキストです。

状態

チェックボックスは次の 3 つの状態のいずれかになります。

• 未選択: このチェックボックスは選択されていません。ボックスは空です。
• 不確定: チェックボックスは不確定の状態です。箱にはダッシュが含まれています。
• 選択済み: このチェックボックスがオンになっています。ボックスにチェックマークが表示されています。

次の図は、チェックボックスの 3 つの状態を示しています。

実装

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 ラムダが checked 状態を更新します。

結果

この例のチェックボックスをオフにすると、次のコンポーネントが生成されます。

同じチェックボックスがオンの場合、次のように表示されます。

高度な例

アプリにチェックボックスを実装する方法の複雑な例を以下に示します。このスニペットには、親チェックボックスと一連の子チェックボックスが含まれています。ユーザーが親チェックボックスをタップすると、すべての子チェックボックスがオンになります。

@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 リスト内の対応する状態を更新します。
  • 子のチェックボックスがすべてオンになると、このコードは「All options selected」を表示します。

結果

この例では、すべてのチェックボックスがオフになっている場合、次のコンポーネントが生成されます。

同様に、すべてのオプションがオンの場合（ユーザーが [すべて選択] をタップした場合）は、次のようにコンポーネントが表示されます。

オプションを 1 つだけオンにすると、親チェックボックスに不確定状態が表示されます。

参考情報

• マテリアル デザインのチェックボックス