如何只选择一个复选框（jetpack compose/kotlin）？

Question

我有一个选项列表，每个选项都有一个复选框。我希望用户只能选择一个。 复选框：

@Composable
fun CheckboxResource(isSelected: Boolean): Painter {
    return if (isSelected) {
        painterResource(id = R.drawable.check_on)
    } else {
        painterResource(id = R.drawable.check_off)
    }
}

和可组合项：

fun SelectOptionsCheckbox(
    isSelectedOption: Boolean,
    onSelectOption: (Boolean) -> Unit
) {

        val selectedOption = remember {
            mutableStateOf(isSelectedOption)
        }
 Row {
   Text()
            Icon(
                painter = CheckboxResource(isSelected = selectedOption.value),
                contentDescription = "Checkbox",
                modifier = Modifier
                    .clickable {
                        selectedOption.value = selectedOption.value.not()
                        onSelectOption(selectedOption.value)
                    },
)}

通过这种方式，复选框可以工作，但我可以选择所有选项

Answer 1

我更新为 imageVector 因为我没有可绘制的东西，你可以使用你的

@Composable
fun CheckboxResource(isSelected: Boolean): ImageVector {
    return if (isSelected) {
        Icons.Default.Check
    } else {
        Icons.Default.Cancel
    }
}

@Composable
fun SelectOptionsCheckout(
    text: String,
    isSelectedOption: Boolean,
    onSelectOption: (String) -> Unit
) {

    Row {
        Text(text)
        Icon(
            imageVector = CheckboxResource(isSelected = isSelectedOption),
            contentDescription = "Checkbox",
            modifier = Modifier
                .clickable {
                    onSelectOption(text)
                },
        )
    }
}

复选框组

   @Composable
    private fun CheckBoxGroup() {
        val radioOptions = listOf("OptionA", "OptionB", "OptionC")
    
        val (selectedOption: String, onOptionSelected: (String) -> Unit) = remember {
            mutableStateOf(
                radioOptions[0]
            )
        }
    
        Column(Modifier.selectableGroup()) {
            radioOptions.forEach { text ->
                SelectOptionsCheckout(
                    text = text,
                    isSelectedOption = selectedOption == text,
                    onSelectOption = onOptionSelected
                )
            }
        }
    }

没有初始选定项目的复选框组

将状态从 Int 更改为 String 并传递复选框的索引并在单击时返回这些索引并与前一个进行比较。如果它等于前一个，则将新的设置为 -1

@Composable
fun SelectOptionsCheckout(
    index: Int,
    text: String,
    isSelectedOption: Boolean,
    onSelectOption: (Int) -> Unit
) {

    Row() {
        Text(text)
        Icon(
            imageVector = CheckboxResource(isSelected = isSelectedOption),
            contentDescription = "Checkbox",
            modifier = Modifier
                .clickable {
                    onSelectOption(index)
                }
        )
    }
}

@Composable
private fun CheckBoxGroup() {
    val radioOptions = listOf("OptionA", "OptionB", "OptionC")

    val (selectedOption: Int, onOptionSelected: (Int) -> Unit) = remember {
        mutableStateOf(
            -1
        )
    }

    Column(Modifier.selectableGroup()) {
        radioOptions.forEachIndexed { index, text ->
            SelectOptionsCheckout(
                index = index,
                text = text,
                isSelectedOption = selectedOption == index,
                onSelectOption = {
                    if (it == selectedOption) {
                        onOptionSelected(-1)
                    } else {
                        onOptionSelected(it)
                    }
                }
            )
        }
    }
}