Jetpack Compose 中的暴露下拉菜单

Question

你好，我需要帮助。如何制作像照片上的下拉菜单？有简单的方法吗？

- HighBinder

Answer 1

您可以使用M3提供的标准ExposedDropdownMenuBox。

例如：

    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[0]) }

    val shape = if (expanded) RoundedCornerShape(8.dp).copy(bottomEnd = CornerSize(0.dp), bottomStart = CornerSize(0.dp))
           else RoundedCornerShape(8.dp)

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = !expanded },
    ) {

        TextField(
            modifier = Modifier.menuAnchor(),
            textStyle = TextStyle.Default.copy(
                fontSize = 14.sp,
                fontWeight=  FontWeight.Light),
            readOnly = true,
            value = selectedOptionText,
            onValueChange = {},
            label = { Text("Unit of length", fontWeight = FontWeight.Bold, ) },
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
            shape = shape,
            colors = ExposedDropdownMenuDefaults.textFieldColors(
                focusedIndicatorColor = Transparent,
                unfocusedIndicatorColor = Transparent
            )
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
        ) {
            options.forEach { selectionOption ->
                DropdownMenuItem(
                    text = { Text(selectionOption) },
                    onClick = {
                        selectedOptionText = selectionOption
                        expanded = false
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }
    }

- Gabriele Mariotti

---

我尝试使用Exposed Dropdown Menu来实现，但是我没有找到正确的方法如何将所有角落都圆润，并在展开后仅将顶部的两个角和底部的两个角圆润，而不是中间的角。 - HighBinder

@HighBinder 我已经根据展开状态更新了答案的形状。 - Gabriele Mariotti

它看起来很棒，但是否有更改暴露下拉菜单动画的选项？谢谢 :) - HighBinder

据我所知，它是在内部定义的。 - Gabriele Mariotti

我们需要一个 menuAnchor 吗？如果是这样，那么它的 Gradle 依赖关系是什么？ - IgorGanapolsky

@IgorGanapolsky M3 1.0.0 - Gabriele Mariotti