Android Jetpack Compose Checkbox 核取方塊

Jetpack Compose 的核取方塊 Checkbox 和其他的很不一樣，他只有一個框而已，沒有顯示文字的地方，不過我們可以搭配 Text 來顯示文字

先來看成果：

單純的 Checkbox (只有框框)

val isChecked = remember { mutableStateOf(false) }
Checkbox(
    checked = isChecked.value, // 是否勾選
    enabled = true, // 能否被變更
    onCheckedChange = { checked ->
        isChecked.value = checked
    },
    colors = CheckboxDefaults.colors(
        checkedColor = MaterialTheme.colors.primarySurface, // 勾選時顏色
        uncheckedColor = MaterialTheme.colors.primary, // 未勾選時顏色
    )
)

包含文字的 CheckBox

val isChecked = remember { mutableStateOf(false) }
Row(
    modifier = Modifier
        .clickable(onClick = {
            isChecked.value = !isChecked.value // 點擊文字時也可以變更勾選狀態
        })
        .padding(16.dp),

    ) {
    Checkbox(
        checked = isChecked.value, // 是否勾選
        enabled = true, // 能否被變更
        onCheckedChange = { checked ->
            isChecked.value = checked
        },
        colors = CheckboxDefaults.colors(
            checkedColor = MaterialTheme.colors.primarySurface, // 勾選時顏色
            uncheckedColor = MaterialTheme.colors.primary, // 未勾選時顏色
        )
    )
    Text(
        text = "Ruyut",
        color = MaterialTheme.colors.secondaryVariant,
        modifier = Modifier
            .padding(start = 8.dp)
            .align(Alignment.CenterVertically)
    )
}

完整程式碼：

.