Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

チェックボックス

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

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

解剖学

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

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

州

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

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

次の図は、チェックボックスの 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」を表示します。