체크박스

체크박스를 사용하면 사용자가 목록에서 하나 이상의 항목을 선택할 수 있습니다. 체크박스를 사용하여 사용자가 다음 작업을 할 수 있습니다.

항목을 사용 설정 또는 사용 중지합니다.
목록에서 여러 옵션 중에서 선택합니다.
동의 또는 수락을 나타냅니다.

분석

체크박스는 다음 요소로 구성됩니다.

상자: 체크박스의 컨테이너입니다.
체크: 체크박스가 선택되었는지 여부를 보여주는 시각적 표시기입니다.
라벨: 체크박스를 설명하는 텍스트입니다.

주

체크박스는 다음 세 가지 상태 중 하나일 수 있습니다.

선택되지 않음: 체크박스가 선택되지 않았습니다. 상자가 비어 있습니다.
결정되지 않음: 체크박스가 결정되지 않은 상태입니다. 상자에 대시가 포함되어 있습니다.
선택됨: 체크박스가 선택되었습니다. 상자에 체크표시가 포함되어 있습니다.

다음 이미지는 체크박스의 세 가지 상태를 보여줍니다.

선택 해제됨, 선택됨, 불확정의 세 가지 상태에 있는 체크박스 구성요소의 예 — **그림 1.** 체크박스의 세 가지 상태 선택되지 않음, 결정되지 않음, 선택됨

구현

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"이 표시됩니다.