[Android] Checkbox 사용법 (Jetpack Compose)

Checkbox 기본 사용법

• Checkbox는 checked 상태와 onCheckedChange 콜백이 필요하다.

@Composable
fun SimpleCheckbox() {
    var checked by remember { mutableStateOf(false) }

    Checkbox(
        checked = checked,
        onCheckedChange = { checked = it }
    )
}

 

• checked : 체크 여부 (true = 체크됨, false = 체크 해제)
• onCheckedChange : 체크 상태가 변경될 때 호출되는 콜백

 

텍스트와 함께 사용하기 (Row 사용)

@Composable
fun LabeledCheckbox() {
    var checked by remember { mutableStateOf(false) }

    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it }
        )
        Text(
            text = if (checked) "선택됨" else "선택 안됨",
            modifier = Modifier.padding(start = 8.dp)
        )
    }
}

 

 

 

색상 커스텀하기

• colors 매개변수를 사용하여 체크박스의 색상을 변경할 수 있다.

@Composable
fun CustomColorCheckbox() {
    var checked by remember { mutableStateOf(false) }

    Checkbox(
        checked = checked,
        onCheckedChange = { checked = it },
        colors = CheckboxDefaults.colors(
            checkedColor = Color.Green,  // 체크되었을 때 색상
            uncheckedColor = Color.Gray, // 체크 안 되었을 때 색상
            checkmarkColor = Color.White // 체크 표시 색상
        )
    )
}

 

 

트라이-스테이트 체크박스 (TriStateCheckbox)

• 체크 상태가 true, false, null(중간 상태)를 가질 수 있는 TriStateCheckbox

@Composable
fun TriStateCheckboxSample() {
    var state by remember { mutableStateOf(ToggleableState.Indeterminate) }

    TriStateCheckbox(
        state = state,
        onClick = {
            state = when (state) {
                ToggleableState.Off -> ToggleableState.On
                ToggleableState.On -> ToggleableState.Indeterminate
                ToggleableState.Indeterminate -> ToggleableState.Off
            }
        }
    )
}

 

• ToggleableState.On → 체크됨
• ToggleableState.Off → 체크 해제됨
• ToggleableState.Indeterminate → 중간 상태 (일부만 선택된 상태)

 

체크박스 비활성화 (enabled = false)

@Composable
fun DisabledCheckbox() {
    Checkbox(
        checked = true,
        onCheckedChange = {},
        enabled = false // 비활성화
    )
}