如何在Jetpack Compose中基于布尔变量禁用ExposedDropdownMenuBox

你的代码已经给TextField设置了enabled = isTitleEnabled，但ExposedDropdownMenuBox的展开逻辑没受这个变量控制，所以即使TextField禁用，点击仍然能展开菜单。要实现完全禁用的效果，需要从几个地方调整：

修改方案 #

1. 控制菜单展开逻辑：在ExposedDropdownMenuBox的onExpandedChange回调里，只有当isTitleEnabled为true时才切换展开状态
2. 同步状态：当isTitleEnabled变为false时，自动关闭已展开的菜单
3. 视觉反馈：禁用时调整下拉图标样式，让用户一眼看出组件不可用

修改后的完整代码 #

@Composable
private fun Title(
    title: String,
    onTitleChange: (String) -> Unit,
    isTitleEnabled: Boolean
) {
    val options = stringArrayResource(id = R.array.name_titles)
    var expanded by remember { mutableStateOf(false) }
    var selectedOptionText by remember { mutableStateOf(title) }

    // 当isTitleEnabled变为false时，自动关闭菜单
    LaunchedEffect(isTitleEnabled) {
        if (!isTitleEnabled) {
            expanded = false
        }
    }

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = {
            // 仅当组件启用时，才允许切换展开状态
            if (isTitleEnabled) {
                expanded = !expanded
            }
        }
    ) {
        TextField(
            enabled = isTitleEnabled,
            modifier = Modifier
                .fillMaxWidth()
                .greyBordered(),
            readOnly = true,
            value = selectedOptionText,
            onValueChange = { },
            label = { Text(stringResource(id = R.string.input_hint_title)) },
            trailingIcon = { 
                // 禁用时调整图标透明度，提供视觉反馈
                TrailingIcon(
                    expanded = expanded,
                    modifier = Modifier.alpha(if (isTitleEnabled) 1f else 0.4f)
                ) 
            },
            colors = ExposedDropdownMenuDefaults.outlinedTextFieldColors(
                textColor = navyBlue,
                focusedLabelColor = nightGray,
                backgroundColor = white,
                cursorColor = navyBlue,
                trailingIconColor = nightGray,
                focusedTrailingIconColor = nightGray,
                focusedBorderColor = Color.Transparent,
                unfocusedBorderColor = Color.Transparent,
                disabledBorderColor = Color.Transparent,
            )
        )
        ExposedDropdownMenu(
            expanded = expanded && isTitleEnabled, // 确保禁用时菜单不会显示
            onDismissRequest = { expanded = false },
        ) {
            options.forEach { selectionOption ->
                DropdownMenuItem(
                    onClick = {
                        selectedOptionText = selectionOption
                        onTitleChange(selectionOption)
                        expanded = false
                    }
                ) {
                    Text(text = selectionOption)
                }
            }
        }
    }
}

// 调整TrailingIcon接收modifier参数，适配禁用状态样式
@Composable
private fun TrailingIcon(expanded: Boolean, modifier: Modifier = Modifier) {
    Icon(
        modifier = modifier,
        imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
        contentDescription = null
    )
}

关键修改说明 #

• onExpandedChange的判断：点击下拉按钮或TextField时，只有isTitleEnabled为true才会切换展开状态，直接阻断了禁用时的展开操作
• LaunchedEffect监听状态：当isTitleEnabled从true变为false时，自动关闭菜单，避免出现组件禁用但菜单还展开的不一致状态
• ExposedDropdownMenu的expanded参数：增加&& isTitleEnabled的判断，双重保障禁用时菜单不会显示
• 图标透明度调整：禁用时降低图标透明度，符合Material Design的禁用状态视觉规范，让用户清晰感知组件状态

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