jetpack compose 中下拉菜单的默认值答案

【问题标题】：Default value for dropdown menu in jetpack composejetpack compose 中下拉菜单的默认值
【发布时间】：2022-11-06 19:58:51
【问题描述】：

我想在组件呈现后立即为我的下拉菜单选择一个默认值。不希望它设置为标签，而是我希望默认选择下拉菜单中的选项之一，然后用户可以根据自己的喜好更改它

我正在做这样的事情，它确实设置了默认值，但是我无法通过从下拉列表中选择来更改它

val inspectorList = searchViewModel.inspectors.collectAsState().value
var defaultSelectedInspector = ""
var selectedInspector by remember { mutableStateOf(defaultSelectedInspector)}
if (inspectorList?.isNotEmpty() == true) {
    defaultSelectedInspector = inspectorList[0]
    selectedInspector = defaultSelectedInspector
}

这是我的下拉菜单代码

Box(modifier = Modifier.fillMaxWidth()) {
                    OutlinedTextField(
                        value = selectedInspector,
                        onValueChange = {},
                        enabled = false,
                        modifier = Modifier
                            .clickable { showInspectorDropdown = !showInspectorDropdown }
                            .onGloballyPositioned { coordinates ->
                                textFieldSize = coordinates.size.toSize()
                            },
                        colors = TextFieldDefaults.textFieldColors(
                            disabledTextColor = Color.DarkGray,
                            backgroundColor = Color.Transparent
                        ),
                        trailingIcon = {Icon(imageVector = inspectorDropDownIcon, contentDescription = "")}
                    )

                    DropdownMenu(
                        expanded = showInspectorDropdown,
                        onDismissRequest = { showInspectorDropdown = false },
                        Modifier.width(with(LocalDensity.current) { textFieldSize.width.toDp() })
                    ) {
                        inspectorList?.forEach { inspector ->
                            DropdownMenuItem(
                                onClick = {
                                    showInspectorDropdown = false
                                    selectedInspector = inspector
                                }) {
                                Text(text = inspector)
                            }
                        }
                    }
                }

【问题讨论】：

标签： android kotlin android-jetpack-compose android-jetpack android-compose-exposeddropdown

【解决方案1】：

您可以尝试以下方法：

val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
var expanded by remember { mutableStateOf(false) }
var selectedOptionText by remember { mutableStateOf(options[1]) }

// We want to react on tap/press on TextField to show menu
ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = {
        expanded = !expanded
    }
) {
    TextField(
        readOnly = true,
        value = selectedOptionText,
        onValueChange = { },
        label = { Text("Label") },
        trailingIcon = {
            ExposedDropdownMenuDefaults.TrailingIcon(
                expanded = expanded
            )
        },
        colors = ExposedDropdownMenuDefaults.textFieldColors()
    )
    ExposedDropdownMenu(
        expanded = expanded,
        onDismissRequest = {
            expanded = false
        }
    ) {
        options.forEach { selectionOption ->
            DropdownMenuItem(
                onClick = {
                    selectedOptionText = selectionOption
                    expanded = false
                }
            ) {
                Text(text = selectionOption)
            }
        }
    }
}

【讨论】：