Android Compose 下拉选择框 ExposedDropdownMenu下拉选择

复制代码
/**
 * @author   创建人:蒙石瑞
 * @date     创建时间:2024/8/23 10:57
 * @Description    创建内容:下拉选择框
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomExposedDropdownMenu(
    options: List<out DropdownMenuDes>,
    labelStr: String,
    onSelect: (DropdownMenuDes) -> Unit
) {

    var expanded by remember {
        mutableStateOf(false)
    }
    var selectedOptionText by remember { mutableStateOf("") }
    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = {
            expanded = !expanded
        },
    ) {
        CustomOutlinedTextField(
            value = selectedOptionText,
            onValueChange = { selectedOptionText = it },
            trailingIcon = {
                ExposedDropdownMenuDefaults.TrailingIcon(
                    expanded = expanded
                )
            },
            label = { Text(labelStr) },
            singleLine = true,
            colors = OutlinedTextFieldDefaults.colors(
                focusedBorderColor = Color.Blue,
                unfocusedBorderColor = Color.White,
                cursorColor = Color.Black,
                focusedContainerColor = Color.White,
                unfocusedContainerColor = Color.White,
                focusedLabelColor = Color.Blue,
                disabledLabelColor = Color.Black

            ),
            modifier = Modifier
                .width(120.dp)
                .height(50.dp)
                .menuAnchor(),
            readOnly = true,
            contentPadding = PaddingValues(start = 5.dp, end = 2.dp),
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier.heightIn(max = 250.dp)
        ) {

            options.forEach { option ->
                DropdownMenuItem(text = { Text(option.showName) }, onClick = {
                    selectedOptionText = option.showName
                    expanded = false
                    onSelect(option)
                })
            }
        }

    }
}

使用

复制代码
abstract class DropdownMenuDes(val showName: String, val showId: String)

 val tempShow = listOf(
                            DropdownMenuInfo("one", "xxxx"),
                            DropdownMenuInfo("2222", "xxxx"),
                            DropdownMenuInfo("33333", "xxxx"),
                            DropdownMenuInfo("4444", "xxxx"),
                            DropdownMenuInfo("5555", "xxxx"),
                            DropdownMenuInfo("666", "xxxx"),
                            DropdownMenuInfo("777", "xxxx"),
                            DropdownMenuInfo("999", "xxxx"),
                            DropdownMenuInfo("1010", "xxxx")
                        )
                        Row {
                            CustomExposedDropdownMenu(tempShow, "垛位") { item ->
                                ToastUtil.showToast(item.showName)
                            }
                        }
相关推荐
Java后端的Ai之路16 分钟前
模型调好了怎么给老板看?用这玩意儿5分钟出Demo,连前端都不用学:Gradio 6全栈实战指南
前端·机器学习·gradio
木斯佳18 分钟前
前端八股文面经大全:中科星图前端日常实习(2026-04-29)·面经深度解析
前端
heRs BART33 分钟前
spring-boot-starter和spring-boot-starter-web的关联
前端
龙猫里的小梅啊34 分钟前
CSS(七)CSS列表控制
前端·css
浩冉学编程35 分钟前
微信小程序中基于java后端实现官方的文本内容安全识别msgSecCheck
java·前端·安全·微信小程序·小程序·微信公众平台·内容安全审核
李李李勃谦1 小时前
鸿蒙PC配色方案工具:取色、配色生成与 CSS 导出
前端·css·华为·harmonyos
Jul1en_1 小时前
Claude 迁移 Codex 工作流迁移与更新
java·服务器·前端·后端·ai编程
Heo1 小时前
14_React 中的更新队列 updateQueue
前端·javascript·面试
前端 贾公子1 小时前
解决浏览器端 globalThis is not defined 报错
前端·javascript·vue.js
宁雨桥1 小时前
前端与AI结合实战分享
前端·人工智能