チェックボックスを使用すると、ユーザーはリストから 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" ) }
解説
このコードは、最初はオフになっているチェックボックスを作成します。ユーザーがチェックボックスをクリックすると、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") } }
解説
この例から注意すべき点は次のとおりです。
- 状態管理:
childCheckedStates
:mutableStateOf()
を使用して各子チェックボックスのチェック状態を追跡するブール値のリスト。parentState
: 値が子チェックボックスの状態から導出されるToggleableState
。
- UI コンポーネント:
TriStateCheckbox
: 親チェックボックスに必要です。state
パラメータがあり、未確定に設定できます。Checkbox
: 子チェックボックスごとに使用され、その状態はchildCheckedStates
内の対応する要素にリンクされます。Text
: ラベルとメッセージ(「すべて選択」、「オプション X」、「すべてのオプションが選択されています」)を表示します。
- ロジック:
- 親チェックボックスの
onClick
は、すべての子チェックボックスを現在の親状態の反対に更新します。 - 各子チェックボックスの
onCheckedChange
は、childCheckedStates
リスト内の対応する状態を更新します。 - すべての子チェックボックスがオンになっている場合、コードは「
All options selected
」を表示します。
- 親チェックボックスの
結果
この例では、すべてのチェックボックスをオフにすると、次のコンポーネントが生成されます。

同様に、ユーザーがすべて選択をタップしたときに、すべてのオプションがオンになっているコンポーネントは次のようになります。
![ラベル付きのチェックボックスのシリーズ。最初のチェックボックスには [すべて選択] と表示されます。その下には「すべてのオプションが選択されています」というテキスト コンポーネントがあります。](https://developer.android.google.cn/static/develop/ui/compose/images/components/checkbox-parent-checked.png?hl=ja)
1 つのオプションのみがオンになっている場合、親チェックボックスは未確定の状態になります。
![ラベル付きのチェックボックスがオフになっている一連のチェックボックス。1 つを除くすべてのチェックボックスがオフになっています。[すべて選択] チェックボックスは未確定で、ダッシュが表示されています。](https://developer.android.google.cn/static/develop/ui/compose/images/components/checkbox-parent-indeterminate.png?hl=ja)