如何使用ExposedDropdownMenu创建多步骤表单？

Question

我试图禁用 textFields 以强制我的用户按特定顺序完成表单。 我创建了一个由 4 个

ExposedDropdownMenuBox

和它们的

TextField

组成的表单，我添加了一个

FocusManager

以在选择一个值时从一个输入移动到

Next

。

我想找到一种方法，通过在先前的输入未完成时禁用输入来强制按该顺序进行“选择 A -> ... -> 选择 D”。 例如，我不想让选项 B 不是选项 A。

所以，基于文档，这是我当前的代码： （我在这里也创建了一个要点）

    @Composable
fun TransferDestination() {
    val optionsA = listOf("-", "A1", "A2", "A3", "A4")
    val optionsB = listOf("-", "B1", "B2", "B3", "B4")
    val optionsC = listOf("-", "C1", "C2", "C3", "C4",)
    val optionsD = listOf("-", "D1", "D2", "D3", "D4",)
    var selectedA by remember { mutableStateOf("-") }
    var selectedB by remember { mutableStateOf("-") }
    var selectedC by remember { mutableStateOf("-") }
    var selectedD by remember { mutableStateOf("-") }

    var expanded0 by remember { mutableStateOf(false) }
    var expanded1 by remember { mutableStateOf(false) }
    var expanded2 by remember { mutableStateOf(false) }
    var expanded3 by remember { mutableStateOf(false) }

Column() {
InputSelect(
                    label = "Choice A",
                    isEnabled = true,
                    expanded = expanded0,
                    list = optionsA,
                    value = selectedA,
                    onExpandedChange = {
                        expanded0 = !expanded0
                    },
                    onSelect = {
                        selectedA = it
                        if (it != "-") {
                           focusManager.moveFocus(FocusDirection.Next)
                            expanded1 = !expanded1
                        }
                    }
                )
InputSelect(
                    label = "Choice B",
                    isEnabled = true,
                    expanded = expanded1,
                    list = optionsB,
                    value = selectedB,
                    onExpandedChange = {
                        expanded1 = !expanded1
                    },
                    onSelect = {
                        selectedB = it
                        if (it != "-") {
                            focusManager.moveFocus(FocusDirection.Next)
                            expanded2 = !expanded2
                        }
                    }
                )

// and same with C and D

}
}


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun InputSelect(
    label: String = "Label",
    isEnabled: Boolean,
    expanded: Boolean,
    list: List<String>,
    value: String,
    onExpandedChange: () -> Unit,
    onSelect: (str: String) -> Unit
) {
    // We want to react on tap/press on TextField to show menu
    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = {
            println("onExpandedChange: label? $label; isEnabled? $isEnabled")
            if (isEnabled) {
                onExpandedChange()
            }
        },
    ) {
        OutlinedTextField(
            // The `menuAnchor` modifier must be passed to the text field for correctness.
            modifier = Modifier
                .menuAnchor()
                .padding(4.dp),
//            enabled = isEnabled,
            enabled = isEnabled,
            readOnly = true,
            value = value,
            onValueChange = {},
            label = { Text(label) },
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
            shape = RoundedCornerShape(8.dp),
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = {
                onExpandedChange()
            },
        ) {
            list.forEach { selectionOption ->
                DropdownMenuItem(
                    text = { Text(selectionOption) },
                    onClick = {
//                        selectedOptionText = selectionOption
//                        expanded = false
                        onSelect(selectionOption)
                        onExpandedChange()
                        println("select + change expand")
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }
    }
}

关于如何制作这个的任何想法？ 提前致谢。