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)
                            }
                        }
相关推荐
元争栈道23 分钟前
webview和H5来实现的android短视频(短剧)音视频播放依赖控件
android·音视频
web1508509664129 分钟前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
Yvemil732 分钟前
《开启微服务之旅:Spring Boot Web开发举例》(一)
前端·spring boot·微服务
天涯学馆1 小时前
解锁WebAssembly与JavaScript交互的无限可能
前端·webassembly
阿甘知识库1 小时前
宝塔面板跨服务器数据同步教程:双机备份零停机
android·运维·服务器·备份·同步·宝塔面板·建站
少年姜太公1 小时前
从零开始详解js中的this(下)
前端·javascript·程序员
哑巴语天雨1 小时前
React+Vite项目框架
前端·react.js·前端框架
初遇你时动了情1 小时前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js
元争栈道2 小时前
webview+H5来实现的android短视频(短剧)音视频播放依赖控件资源
android·音视频
乔峰不是张无忌3302 小时前
【HTML】动态闪烁圣诞树+雪花+音效
前端·javascript·html·圣诞树