Jetpack Compose下拉菜单优化：解决50+项卡顿及图标点击不关闭问题

问题1：点击尾部图标无法关闭菜单 #

原代码中尾部图标仅展示展开状态，但未绑定菜单切换逻辑。在ExposedDropdownMenuBox的作用域内，可直接调用toggleMenu()方法切换菜单展开状态，修改trailingIcon实现即可修复：

trailingIcon = {
    ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
        .clickable { toggleMenu() }
}

问题2：大量选项导致卡顿 #

原代码用forEach一次性创建所有DropdownMenuItem，当选项数量≥50时会触发全量渲染，导致重组和绘制性能下降。改用LazyColumn作为菜单内容容器，仅渲染当前可见选项，能大幅提升性能：
将原options.forEach遍历逻辑替换为：

LazyColumn {
    items(options) { option ->
        DropdownMenuItem(
            text = { Text(option, style = MaterialTheme.typography.bodyLarge) },
            onClick = {
                text = option
                expanded = false
            },
            contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
        )
    }
}

优化后完整代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Spinner(label: String, options: List<String>) {
    var expanded by remember { mutableStateOf(false) }
    var text by remember { mutableStateOf(options.first()) }

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = it },
    ) {
        TextField(
            modifier = Modifier.menuAnchor(),
            value = text,
            onValueChange = {},
            readOnly = true,
            singleLine = true,
            label = { Text(label) },
            trailingIcon = {
                ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
                    .clickable { toggleMenu() }
            },
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
        ) {
            LazyColumn {
                items(options) { option ->
                    DropdownMenuItem(
                        text = { Text(option, style = MaterialTheme.typography.bodyLarge) },
                        onClick = {
                            text = option
                            expanded = false
                        },
                        contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                    )
                }
            }
        }
    }
}

关键说明 #

• toggleMenu()是ExposedDropdownMenuBoxScope提供的内置方法，确保点击图标时菜单状态同步切换；
• LazyColumn的items方法仅加载当前可见列表项，避免一次性创建大量DropdownMenuItem的性能损耗，达到与View系统Spinner相近的性能表现。

内容的提问来源于stack exchange，提问作者EdgeDev