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

euoag5mw 于 2023-04-28 发布在 Android

关注(0)|答案(1)|浏览(146)

我尝试禁用textFields来强制用户按一定顺序完成表单。我创建了一个由4个ExposedDropdownMenuBox和它们的TextField组成的表单，并添加了一个FocusManager，以便在选择值时从一个输入移动到Next。
我想找到一种方法，通过在前面的输入未完成时禁用输入，强制以该顺序做出“选择A -〉... -〉选择D”。例如，我不想允许选择B，因为没有做出选择A。
根据文档，这是我当前的代码：（I also created a gist here）

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

有什么办法可以让我做这个吗？先谢谢你了。

android

来源：https://stackoverflow.com/questions/76119513/how-to-use-exposeddropdownmenu-to-create-a-multi-steps-form

1条答案

按热度按时间

d8tt03nd1#

我会建议加上这些标志

var completedA by remember { mutableStateOf(false) }
var completedB by remember { mutableStateOf(false) }
var completedC by remember { mutableStateOf(false) }

然后在select时将其更新为true，并将下一个的isEnabled参数设置为前一个标志。
完整代码：

@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) }
    var completedA by remember { mutableStateOf(false) }
    var completedB by remember { mutableStateOf(false) }
    var completedC by remember { mutableStateOf(false) }
    // IME handler
    val focusManager = LocalFocusManager.current

    val columnModifier = Modifier
        .width(250.dp)
        .padding(end = 8.dp)

    val cornerRadius = 50
    val firstButtonShape = RoundedCornerShape(
        topStartPercent = cornerRadius,
        topEndPercent = 0,
        bottomStartPercent = cornerRadius,
        bottomEndPercent = 0
    )
    val lastButtonShape = RoundedCornerShape(
        topStartPercent = 0,
        topEndPercent = cornerRadius,
        bottomStartPercent = 0,
        bottomEndPercent = cornerRadius
    )
    var selectedBatB by remember { mutableStateOf(true) }
    val colorSelected = Color(0xFF3F6CB4)
    val colorUnselected = Color(0x803F6CB4)
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "$expanded0, $selectedA, ${selectedA != "-"}")
        Text(text = "$expanded1, $selectedB, ${selectedB != "-"}")
        Text(text = "$expanded2, $selectedC, ${selectedC != "-"}")
        Text(text = "$expanded3, $selectedD, ${selectedD != "-"}")

        val centerHorizon = Alignment.CenterHorizontally
        Row(
            modifier = Modifier.padding(4.dp),
        ) {
            Column(modifier = columnModifier.weight(1f), horizontalAlignment = centerHorizon) {
                InputSelect(
                    label = "Choice A",
                    isEnabled = true,
                    expanded = expanded0,
                    list = optionsA,
                    value = selectedA,
                    onExpandedChange = {
                        expanded0 = !expanded0
                    },
                    onSelect = {
                        selectedA = it
                        if (it != "-") {
                            completedA = true
                            focusManager.moveFocus(FocusDirection.Next)
                            expanded1 = !expanded1

                        }
                    }
                )
            }
            Column(modifier = columnModifier.weight(1f), horizontalAlignment = centerHorizon) {
                InputSelect(
                    label = "Choice B",
                    isEnabled = completedA,
                    expanded = expanded1,
                    list = optionsB,
                    value = selectedB,
                    onExpandedChange = {
                        expanded1 = !expanded1
                    },
                    onSelect = {
                        selectedB = it
                        if (it != "-") {
                            completedB = true
                            focusManager.moveFocus(FocusDirection.Next)
                            expanded2 = !expanded2
                        }
                    }
                )
            }
        }

        Row(
            modifier = Modifier.padding(horizontal = 4.dp)
        ) {
            Column(modifier = columnModifier.weight(1f), horizontalAlignment = centerHorizon) {
                InputSelect(
                    label = "Choice C",
                    isEnabled = completedB,
                    expanded = expanded2,
                    list = optionsC,
                    value = selectedC,
                    onExpandedChange = {
                        expanded2 = !expanded2
                    },
                    onSelect = {
                        selectedC = it
                        if (it != "-") {
                            focusManager.moveFocus(FocusDirection.Next)
                            expanded3 = !expanded3
                            completedC = true
                        }
                    }
                )
            }
            Column(modifier = columnModifier.weight(1f), horizontalAlignment = centerHorizon) {
                InputSelect(
                    label = "Choice D",
                    isEnabled = completedC,
                    expanded = expanded3,
                    list = optionsD,
                    value = selectedD,
                    onExpandedChange = {
                        expanded3 = !expanded3
                    },
                    onSelect = {
                        selectedD = it
                    }
                )
            }
        }
    }
}

赞(0）回复(0）举报 2023-04-28

我来回答

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

1条答案

相关问题

热门标签

最新问答