Jetpack Compose 中复选框的嵌套状态

Question

我遇到了与 Jetpack Compose 中的状态相关的问题。问题是我有包含问题的列表。有些问题需要单选按钮，有些问题需要多选复选框。见下图..

Screen shot example.

Raio Buttino 代码

查看模型class

private val _isRadioChecked = mutableStateListOf<ResearchQuestion>()
val optionState: List<ResearchQuestion> = _isRadioChecked

fun setRadioChecked(index: Int,isChecked: ResearchQuestion) {
    _isRadioChecked[index] = isChecked
}
fun setRadioChecked(isChecked: ResearchQuestion) {
    _optionState.add(isChecked)
}

数据class -> ResearchQuestion

val question: String = "",
val isMultipleChoice: Boolean = false,
val selectedMultipleOption: Set<Int> = emptySet(),
val selectOption: Int = -1,

撰写屏幕 -> 单选按钮撰写

@Composable
fun CodeRadioButton(
  options: List<String>,
  selectedOption: Int,
  onOptionSelected: (Int) -> Unit
) {
  options.forEachIndexed { index, option ->
    Row(
        modifier = Modifier
            .padding(vertical = 5.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        RadioButton(
            modifier = Modifier
                .size(15.dp)
                .padding(start = 15.dp),
            selected = (index == selectedOption),
            onClick = {
                onOptionSelected(index)
            }
        )
        Spacer(modifier = Modifier.padding(horizontal = 15.dp))
        Text(
            modifier = Modifier
                .clickable {
                    onOptionSelected(index)
                },
            text = option,
            style = MaterialTheme.typography.body2
        )
        Spacer(modifier = Modifier.padding(vertical = 10.dp))
    }
  }
 }

撰写屏幕 -> 复选框按钮组成

@Composable
fun CodeMultipleChoice(
  options: List<String>,
  isMultipleChecked: Set<Int>,
  onMultiOptionSelected: (List<Int>) -> Unit,
) {

  options.forEachIndexed { index, option ->
    Row(
        modifier = Modifier
            .padding(vertical = 5.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Checkbox(
            modifier = Modifier
                .size(15.dp)
                .padding(start = 15.dp),
            checked = false, //State did not work
            onCheckedChange = {
                //State did not work
            },
            colors = CheckboxDefaults.colors(
                checkmarkColor = Color.White
            )
        )
        Spacer(modifier = Modifier.padding(horizontal = 15.dp))
        Text(
            modifier = Modifier
                .clickable {
                    
                },
            text = option,
            style = MaterialTheme.typography.body2
        )
        Spacer(modifier = Modifier.padding(vertical = 10.dp))
    }
  }
}

注意：单选按钮工作正常，但多选（复选框）状态不起作用。我创建了 mutableStateList0f() 但如果选中复选框，其他有多个问题的问题也会发生变化。

Answer 1

我将更改的行标记为'changed line'

@Composable
fun CodeMultipleChoice(
    options: List<String>,
    isMultipleChecked: Set<Int>,
    onMultiOptionSelected: (List<Int>) -> Unit,
) {

    var multipleChecked by remember { mutableStateOf(isMultipleChecked)}//*Changed line

    options.forEachIndexed { index, option ->
        Row(
            modifier = Modifier
                .padding(vertical = 5.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Checkbox(
                modifier = Modifier
                    .size(15.dp)
                    .padding(start = 15.dp),
                checked = multipleChecked.contains(index), //*Changed line
                onCheckedChange = { //*Changed line
                    if(it){
                        multipleChecked = multipleChecked + index
                    } else{
                        multipleChecked = multipleChecked - index
                    }
                },
                colors = CheckboxDefaults.colors(
                    checkmarkColor = Color.White
                )
            )
            Spacer(modifier = Modifier.padding(horizontal = 15.dp))
            Text(
                modifier = Modifier
                    .clickable {

                    },
                text = option,
                style = MaterialTheme.typography.body2
            )
            Spacer(modifier = Modifier.padding(vertical = 10.dp))
        }
    }
}

Jetpack Compose 中复选框的嵌套状态

Nested State for checkbox in jetpack compose

android

android-jetpack-compose

lazycolumn

android-jetpack-compose-list