チェックボックス

チェックボックスを使用すると、ユーザーはリストから 1 つ以上のアイテムを選択できます。チェックボックスを使用すると、ユーザーに次の操作を許可できます。

• アイテムのオンとオフを切り替える。
• リスト内の複数のオプションから選択します。
• 同意または承諾を示す。

解剖学

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

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

状態

チェックボックスは、次の 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 つのオプションのみがオンになっている場合、親チェックボックスは未確定の状態になります。

参考情報

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