チェックボックス

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

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

注: ユーザーがリスト内の複数のオプションを選択できる場合は、スイッチやラジオボタンではなく、チェックボックスを使用します。

解剖学

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

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

状態

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

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

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

図 1. チェックボックスの 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 の状態を更新します。

結果

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

図 2. チェックボックスがオフ

チェックボックスをオンにすると、次のように表示されます。

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

注: 未確定の状態のチェックボックスを使用する場合は、TriStateCheckbox を使用する必要があります。これは、Checkbox には ToggleState 型の state パラメータが含まれていないのに対し、ToggleState 型の state パラメータが含まれているためです。

結果

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

図 4. チェックボックスがオフ

同様に、ユーザーがすべて選択をタップしたときに、すべてのオプションがオンになっているコンポーネントは次のようになります。

図 5. チェックボックスがオンになっている

1 つのオプションのみがオンになっている場合、親チェックボックスは未確定の状態になります。

図 6. 未確定チェックボックス

参考情報

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