jetpack 中的下拉菜单可自动滚动到所选项目

Question

当我打开下拉菜单时，我需要自动滚动到所选项目。如果我的列表中有 20 项，我选择了第 18 项。现在我重新打开下拉列表，它应该在下拉视图中显示所选项目。但它没有发生。我使用scrollState 进行了更改，但它不起作用。

这是我的代码，当我打开下拉列表时，我需要自动滚动到所选项目。如果我的列表中有 20 项，我选择了第 18 项。现在我重新打开下拉列表，它应该在下拉视图中显示所选项目。但它没有发生。我使用scrollState 进行了更改，但它不起作用。

@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) }
        Box(modifier = Modifier
                .width((previewWidth + 20).dp)
                .wrapContentSize(Alignment.TopStart)) {
            Column() {
                Row {
                    Text(
                        list[defaultSelection],
                        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 = "Custom Icon",
                        modifier = Modifier
                                .size(30.dp)
                                .padding(PaddingValues(top = 8.dp)),
                        colorFilter = ColorFilter.tint(primaryColor)
                    )
                }
                Divider(color = Color.Gray)
            }
            var scrollState = rememberScrollState()
            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))
                        .scrollable(state = scrollState, orientation = Orientation.Vertical),
            ) {
                LaunchedEffect(expanded) {
                    CcuLog.d("sathish"," Entered in launched effect")
                    scrollState.animateScrollTo(selectedIndex)
                    scrollState.scrollTo(selectedIndex)
                  
                }

                    list.forEachIndexed { index, s ->

                        DropdownMenuItem(onClick = {
                            selectedIndex = index
                            expanded = false
                            onSelected(selectedIndex)
                        }, text = { Text(text = s, style = TextStyle(fontSize = 20.sp)) },
                                modifier = Modifier
                                        .background(if (index == selectedIndex) secondaryColor else                    Color.White),
                                contentPadding = PaddingValues(10.dp)
                        )
                    }

            }

        }
    }
}

Answer 1

DropdownMenu

Composable 有一个专用参数，您可以在其中提供

scrollState

:

@Composable
fun DropdownMenu( 
    expanded: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    offset: DpOffset = DpOffset(0.dp, 0.dp),
    scrollState: ScrollState = rememberScrollState(),
    // ...
    content: @Composable ColumnScope.() -> Unit
): Unit

请按如下方式更新您的代码：

val scrollState = rememberScrollState()
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)),  // remove scrollState here
    scrollState = scrollState   // use this parameter instead
) {
    //...
}