Dropdown菜单在扩展时不可单击

Question

I创建了一个应用程序，并添加了一个下拉列表的组件。它曾经工作，但我无法使其再次工作。当我单击该项目时，点击不会被抓住。

代码如下：

@Composable
fun SortedBySelector(viewModel: MainViewModel) {

    var expanded by remember { mutableStateOf(false) }
    var selectedType by remember { mutableStateOf(SortedBy.BY_DATE) }

    Box(
        modifier = Modifier
    ) {
        Row(modifier = Modifier
            .clickable { expanded = !expanded }
        ) {
            Text(selectedType.value)
            if(expanded) {
                Icon(Icons.Default.KeyboardArrowUp, contentDescription = "Arrow Up")
            } else {
                Icon(Icons.Default.KeyboardArrowDown, contentDescription = "Arrow Down")
            }
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            containerColor = MaterialTheme.colorScheme.background
        ) {
            listOfSortedBy.forEach {
                DropdownMenuItem(
                    text = { Text(it.value) },
                    onClick = {
                        expanded = !expanded
                        selectedType = it
                        viewModel.refreshCategory(it)
                    }
                )
            }
        }
    }
}

任何想法为什么？我无法弄清楚。这个问题在模拟器上。

trone这效果很好

Answer 1

val context = LocalContext.current
val menuItems = listOf("Image", "PDF File")
Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier
        .fillMaxWidth()
        .padding(bottom = 10.dp),
) {
    Text(
        text = "Select Media",
        style = MaterialTheme.typography.titleMedium,
        color = MaterialTheme.colorScheme.onPrimary,
    )
    Box {
        TextButton(
            onClick = { expanded = !expanded },
            contentPadding = PaddingValues(0.dp),
        ) {
            Icon(
                imageVector = Icons.Default.AddCircle,
                contentDescription = "Add Circle",
                tint = MaterialTheme.colorScheme.primary,
            )
            Text(
                text = stringResource(id = R.string.add),
                style = MaterialTheme.typography.titleSmall,
                color = MaterialTheme.colorScheme.onPrimary,
                modifier = Modifier.padding(start = 5.dp)
            )
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = !expanded },
            modifier = Modifier.background(color = Dark_Gunmetal),
        ) {
            menuItems.forEachIndexed { index, menuItem ->
                DropdownMenuItem(
                    onClick = {
                        expanded = false
                        when (index) {
                            0 -> context.showToast("Image Clicked")
                            1 -> context.showToast("PDF Clicked")
                        }
                    },
                    leadingIcon = {
                        Icon(
                            painter = painterResource(if (menuItem == "Image") R.drawable.baseline_person_24 else R.drawable.ic_term),
                            contentDescription = menuItem,
                            tint = MaterialTheme.colorScheme.onPrimary,
                            modifier = Modifier.size(18.dp)
                        )
                    },
                    text = {
                        Text(
                            text = menuItem,
                            style = MaterialTheme.typography.bodySmall,
                            color = MaterialTheme.colorScheme.onPrimary
                        )
                    }
                )
                if (menuItem != menuItems.last()) HorizontalDivider(
                    color = MaterialTheme.colorScheme.onSecondary
                )
            }
        }
    }
}