JetPack中复选框的嵌套状态

Question

我有与JetPack组成的州有关的面临问题。问题是我有包含问题的列表。一些问题需要单个选择的单选按钮，一些问题需要复选框才能进行多个选择。参见下图图。

屏幕截图示例示例。

raio factino code code

查看模型类别

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)
}

数据类 - ＆gt; ResearchEquestion

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

撰写屏幕 - ＆GT; 广播按钮

@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))
    }
  }
 }

撰写屏幕 - ＆GT; 复选框按钮撰写

@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（），但是如果Check Checkbox其他问题也会改变。

Answer 1

我标记了我在“更改线”时更改的行

@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))
        }
    }
}