Jetpack Compose下拉菜单：打开时自动滚动至选中项失效问题

我需要实现打开下拉菜单时自动滚动到已选中条目的功能——比如列表有20个条目，选中第18项后，重新打开菜单要自动定位到这项，但当前代码用scrollState尝试后完全没效果。

问题核心原因 #

你的代码有两个关键问题导致滚动失效：

1. 滚动状态参数错误：ScrollState.scrollTo()接收的是像素值，不是条目索引。直接传selectedIndex（比如18）相当于让菜单滚动18像素，根本达不到定位目标条目的效果。
2. 容器不支持索引滚动：当前用forEachIndexed直接生成DropdownMenuItem，本质是放在普通Column里，这种容器无法通过索引直接控制滚动位置，必须用支持索引滚动的LazyColumn配合LazyListState。

修正后的完整代码 #

@Composable
fun DropDownWithLabel(
    label: String, 
    list: List<String>, 
    previewWidth: Int = 80, 
    expandedWidth: Int = 100,
    onSelected: (Int) -> Unit, 
    defaultSelection: Int = 0,
    spacerLimit: Int = 80,
    paddingLimit: Int = 0,
    heightValue: Int = 275
) {
    Row {
        Box(modifier = Modifier.wrapContentWidth(), contentAlignment = Alignment.Center) {
            HeaderTextView(text = label, padding = paddingLimit)
        }

        Spacer(modifier = Modifier.width(spacerLimit.dp))

        var expanded by remember { mutableStateOf(false) }
        var selectedIndex by remember { mutableStateOf(defaultSelection) }
        // 使用LazyListState管理滚动，初始化时定位到默认选中项
        val lazyListState = rememberLazyListState(initialFirstVisibleItemIndex = defaultSelection)

        Box(modifier = Modifier
            .width((previewWidth + 20).dp)
            .wrapContentSize(Alignment.TopStart)) {
            Column() {
                Row {
                    // 修正：显示当前选中的条目，而非固定默认条目
                    Text(
                        list[selectedIndex],
                        modifier = Modifier
                            .width(previewWidth.dp)
                            .height(35.dp)
                            .clickable(onClick = { expanded = true }),
                        fontSize = 22.sp,
                    )

                    Image(
                        painter = painterResource(id = R.drawable.angle_down_solid),
                        contentDescription = "下拉图标",
                        modifier = Modifier
                            .size(30.dp)
                            .padding(top = 8.dp),
                        colorFilter = ColorFilter.tint(primaryColor)
                    )
                }
                Divider(color = Color.Gray)
            }

            DropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false },
                modifier = Modifier
                    .width((expandedWidth + 20).dp)
                    .height(heightValue.dp)
                    .background(Color.White)
                    .border(0.5.dp, Color.LightGray)
                    .shadow(1.dp, shape = RoundedCornerShape(1.dp)),
            ) {
                // 用LazyColumn替代普通列表，关联滚动状态
                LazyColumn(state = lazyListState) {
                    itemsIndexed(list) { index, s ->
                        DropdownMenuItem(
                            onClick = {
                                selectedIndex = index
                                expanded = false
                                onSelected(selectedIndex)
                            },
                            text = { Text(text = s, fontSize = 20.sp) },
                            modifier = Modifier
                                .background(if (index == selectedIndex) secondaryColor else Color.White),
                            contentPadding = PaddingValues(10.dp)
                        )
                    }
                }

                // 菜单展开时滚动到选中条目
                LaunchedEffect(expanded) {
                    if (expanded) {
                        lazyListState.scrollToItem(selectedIndex)
                        // 如需平滑滚动，替换为：
                        // lazyListState.animateScrollToItem(selectedIndex)
                    }
                }
            }
        }
    }
}

关键修改点说明 #

• 用LazyListState替代ScrollState：它专门针对懒加载列表设计，支持直接通过索引定位滚动位置
• 菜单内容替换为LazyColumn：配合LazyListState实现索引级滚动控制
• 修正预览文本：显示当前选中的条目，而非固定默认值
• 优化滚动触发逻辑：仅在菜单展开时执行滚动，避免无效操作
• 初始化滚动状态：首次打开菜单时直接定位到默认选中项

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