체크박스

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

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

분석

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

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

상태

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

  • 선택 해제: 체크박스가 선택되지 않습니다. 상자가 비어 있습니다.
  • 불확정: 체크박스가 불확정 상태입니다. 상자에는 대시가 포함되어 있습니다.
  • 선택됨: 체크박스가 선택되어 있습니다. 체크박스에 체크표시가 있습니다.

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

선택 해제됨, 선택됨, 불확정 상태의 세 가지 상태에 있는 체크박스 구성요소의 예
그림 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"
    )
}

설명

이 코드는 처음에는 선택 해제된 체크박스를 만듭니다. 사용자가 체크박스를 클릭하면 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")
    }
}

설명

다음은 이 예에서 유의해야 할 몇 가지 사항입니다.

  • 상태 관리:
    • childCheckedStates: mutableStateOf()를 사용하여 각 하위 체크박스의 선택 상태를 추적하는 불리언 목록입니다.
    • parentState: 하위 체크박스의 상태에서 값이 파생되는 ToggleableState입니다.
  • UI 구성요소:
    • TriStateCheckbox: 상위 체크박스에 필요합니다. 이 체크박스에는 확실하지 않음으로 설정할 수 있는 state 매개변수가 있기 때문입니다.
    • Checkbox: 상태가 childCheckedStates의 해당 요소에 연결된 각 하위 체크박스에 사용됩니다.
    • Text: 라벨 및 메시지 ('모두 선택', '옵션 X', '모든 옵션 선택됨')를 표시합니다.
  • 로직:
    • 상위 체크박스의 onClick는 모든 하위 체크박스를 현재 상위 상태와 반대되는 상태로 업데이트합니다.
    • 각 하위 체크박스의 onCheckedChangechildCheckedStates 목록에 상응하는 상태를 업데이트합니다.
    • 모든 하위 체크박스가 선택되면 코드가 'All options selected'을 표시합니다.

결과

이 예에서는 모든 체크박스가 선택 해제된 경우 다음 구성요소를 생성합니다.

라벨이 있는 선택되지 않은 일련의 체크박스와 라벨이 있습니다.
그림 4. 선택 해제된 체크박스

마찬가지로 사용자가 선택 모두를 탭하는 경우와 같이 모든 옵션이 선택된 경우 구성요소가 다음과 같이 표시됩니다.

라벨이 지정되고 선택된 일련의 체크박스 첫 번째는 '모두 선택'으로 표시됩니다. 그 아래에는 'all options selected'(모든 옵션 선택됨)라는 텍스트 구성요소가 있습니다.
그림 5. 선택된 체크박스

옵션이 하나만 선택된 경우 상위 체크박스는 불확정 상태를 표시합니다.

라벨이 지정된 선택 해제된 체크박스 일련 하나를 제외한 모든 항목이 선택 해제되어 있습니다. '모두 선택'이라는 라벨이 지정된 체크박스가 결정되지 않아 대시가 표시됩니다.
그림 6. 불확정 체크박스

추가 리소스