Compose中AlertDialog内ExposedDropdownMenu顶部项截断无法滚动问题

在Jetpack Compose的AlertDialog内使用ExposedDropdownMenu时，菜单展开后列表顶部的4个项无法访问，也无法向上滚动到列表顶端。截图显示"AMC"上方存在"AA"、"ACURA"、"ALFA ROMEO"、"AM GENERAL"等项，但无法滚动查看，仅能向下滚动至列表底部。

相关实现代码 #

MakeSelection组件代码

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MakeSelection(
    vinDescriptionFlow: MutableStateFlow<VinDescription>,
) {
    val vinDescriptionState = vinDescriptionFlow.collectAsState()
    val makeLabelString = "Make"
    val makes =
        SMSDatabase
            .database
            .vinMakeModel
            .observeDistinctMakes().collectAsState(
        initial = emptyList())
    var expanded by remember { mutableStateOf(false) }
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Max)
    ) {
        ExposedDropdownMenuBox(
            modifier = Modifier
                .weight(1f),
            expanded = expanded,
            onExpandedChange = {
                expanded = !expanded
            }
        ) {
            OutlinedTextField(
                modifier = Modifier
                    .fillMaxWidth()
                    .menuAnchor(),
                readOnly = true,
                value = vinDescriptionState.value.make,
                onValueChange = {
                    vinDescriptionState.value.make = it
                },
                label = {
                    Text(makeLabelString)
                },
                placeholder = {
                    Text(makeLabelString.toUpperCase(Locale.current))
                },
                trailingIcon = {
                    ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
                }
            )
            ExposedDropdownMenu(
                expanded = expanded,
                onDismissRequest = {
                    expanded = false
                }
            ) {
                makes.value.forEach {
                    DropdownMenuItem(
                        text = { Text(it) },
                        onClick = {
                            vinDescriptionFlow.value.make = it
                            expanded = false
                        }
                    )
                }
            }
        }
        Button(
            modifier = Modifier
                .padding(Theme.TEXT_FIELD_BUTTON_PADDING)
                .width(IntrinsicSize.Min)
                .fillMaxHeight()
                .defaultMinSize(
                    minWidth = 85.dp,
                    minHeight = 0.dp
                ),
            shape = RoundedCornerShape(size = 6.dp),
            contentPadding = PaddingValues(
                start = 4.dp,
                top = 4.dp,
                end = 4.dp,
                bottom = 4.dp
            ),
            onClick = {

            }
        ) {
            Text(
                modifier = Modifier
                    .align(Alignment.CenterVertically),
                textAlign = TextAlign.Center,
                text = "QUICK JUMP")
        }
    }
}

TowDialog对话框代码

@Composable
fun TowDialog(
    vinDescriptionFlow: MutableStateFlow<VinDescription>,
    show: MutableState<Boolean>,
    onConfirm: (VinDescription) -> Unit) {
    val vinDescriptionState = vinDescriptionFlow.collectAsState()
    AlertDialog(
        onDismissRequest = {
            show.value = false
        },
        confirmButton = {
            TextButton(
                onClick = {
                    onConfirm(vinDescriptionState.value)
                }
            ) {
                Text("Save")
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    show.value = false
                }
            ) {
                Text("Cancel")
            }
        },
        text = {
            Column {
                MakeSelection(vinDescriptionFlow = vinDescriptionFlow)
                ModelSelection(vinDescriptionFlow = vinDescriptionFlow)
                ColorSelection(vinDescriptionFlow = vinDescriptionFlow)
            }
        })
}

解决方案 #

这个问题源于AlertDialog内部的布局Insets未被正确处理，导致ExposedDropdownMenu的顶部内容被截断。可以通过以下两种方式修复：

1. 为ExposedDropdownMenu添加安全区域Insets padding
   给ExposedDropdownMenu添加Modifier.windowInsetsPadding(WindowInsets.safeDrawing)，确保菜单内容不会被系统UI或父布局边界截断：

   ExposedDropdownMenu(
       expanded = expanded,
       onDismissRequest = { expanded = false },
       modifier = Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
   ) {
       makes.value.forEach {
           DropdownMenuItem(
               text = { Text(it) },
               onClick = {
                   vinDescriptionFlow.value.make = it
                   expanded = false
               }
           )
       }
   }
   

2. 为AlertDialog的内容区域添加滚动支持
   当AlertDialog内包含多个组件时，内容可能挤压内部菜单的布局空间。给外层Column添加滚动修饰符，确保内容可以正常滚动，避免组件布局异常：

   text = {
       Column(
           modifier = Modifier.verticalScroll(rememberScrollState())
       ) {
           MakeSelection(vinDescriptionFlow = vinDescriptionFlow)
           ModelSelection(vinDescriptionFlow = vinDescriptionFlow)
           ColorSelection(vinDescriptionFlow = vinDescriptionFlow)
       }
   }
   

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