如何让Jetpack Compose中Card在内部DropDownMenu展开时呈现选中状态

你当前的代码里，Modifier.selectable只是给Card添加了选中的语义标记，但不会自动改变Card的视觉样式——Compose的Card组件默认不会根据selectable的selected状态自动切换外观。要实现展开菜单时Card呈现选中状态，需要手动根据expanded状态修改Card的视觉属性。

方法一：通过Card的colors参数切换背景色 #

直接利用Card的colors参数，根据expanded状态调整容器颜色，模拟选中效果：

var expanded by remember { mutableStateOf(false) }

Card(
    modifier = Modifier
        .selectable(
            selected = expanded,
            onClick = {}
        ),
    colors = CardDefaults.cardColors(
        containerColor = if (expanded) {
            MaterialTheme.colorScheme.secondaryContainer // 选中时的背景色
        } else {
            MaterialTheme.colorScheme.surface // 默认背景色
        }
    )
) {
    Box {
        IconButton(
            onClick = { expanded = true }
        ) {
            Icon(
                imageVector = Icons.Default.MoreVert,
                contentDescription = "更多选项"
            )
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("编辑") },
                onClick = { /* 你的编辑逻辑 */ },
                leadingIcon = {
                    Icon(
                        Icons.Default.Edit,
                        contentDescription = "编辑"
                    )
                }
            )
        }
    }
}

方法二：添加边框强化选中状态 #

如果不想修改背景色，也可以给选中状态的Card添加边框：

var expanded by remember { mutableStateOf(false) }

Card(
    modifier = Modifier
        .selectable(
            selected = expanded,
            onClick = {}
        ),
    border = if (expanded) {
        BorderStroke(1.dp, MaterialTheme.colorScheme.primary) // 选中时的边框
    } else {
        null // 默认无边框
    }
) {
    Box {
        IconButton(
            onClick = { expanded = true }
        ) {
            Icon(
                imageVector = Icons.Default.MoreVert,
                contentDescription = "更多选项"
            )
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("编辑") },
                onClick = { /* 你的编辑逻辑 */ },
                leadingIcon = {
                    Icon(
                        Icons.Default.Edit,
                        contentDescription = "编辑"
                    )
                }
            )
        }
    }
}

关键说明 #

• Modifier.selectable主要是为了无障碍需求，提供选中状态的语义，不会直接改变UI外观。
• 视觉上的选中效果需要通过Card的colors、border等参数，结合expanded状态手动实现。

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