在 Jetpack Compose 中自動滾動后面的項目

Question

我有一個3 Column 。 在第 1 Column的組件是第 2列和第 3 Column 。 在第二Column中，里面有很多組件。 在最后的第 3 Column中，我有一些項目並且我堅持在屏幕底部。 我已經在這個答案的幫助下完成了。 在較小的屏幕上，項目會落后，所以我的主管提到所有項目都會自動滾動到2nd Column ，這顯然在3rd Column的上方。

@Composable
fun Xyz(){
    Theme {
        Column(
            modifier = Modifier
                .padding(dimensionResource(R.dimen.margin_screen_edge_sides))
                .fillMaxSize()
                .verticalScroll(rememberScrollState()),
//            verticalArrangement = Arrangement.Top
            or
//                verticalArrangement = Arrangement.Arrangement.SpaceBetween
        ) {
            Column(
                modifier = Modifier
                    .verticalScroll(rememberScrollState())
                    .weight(1f),
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                // so many item in here.
               //  If here items is behind of 3rd column then automatically scroll the item when user land of this this screen
            }
            Column {
                Button()
                // may be more item in here
            }
        }
    }
}

實際Output

預計 Output

場景 1

注意：- 項目將在2nd Column中增加，即我在AnimatedVisibility中添加了邏輯，因此在重構時它將添加項目。

場景 2

當第三列后面沒有任何項目時，我的屏幕將不會滾動任何內容

如果你有問題請問我。 非常感謝

更新

@Composable
fun Xyz(){
    Theme {
        val scrollState = rememberScrollState()

        LaunchedEffect(
            keyOneIsTrue,
            keyTwoIsTrue
        ) {
            val newValue = scrollState.maxValue
            scrollState.animateScrollTo(newValue)
        }
        Column(
            modifier = Modifier
                .padding(dimensionResource(R.dimen.margin_screen_edge_sides))
                .fillMaxSize()
                .verticalScroll(rememberScrollState()),
//            verticalArrangement = Arrangement.Top
            or
//                verticalArrangement = Arrangement.Arrangement.SpaceBetween
        ) {
            Column(
                modifier = Modifier
                    .verticalScroll(scrollState)
                    .weight(1f),
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                // so many item in here.
                //  If here items is behind of 3rd column then automatically scroll the item when user land of this this screen
            }
            Column {
                Button()
                // may be more item in here
            }
        }
    }
}

我有很多keys ，但我在LaunchedEffect中給你的例子很少。 當keyOneIsTrue進入LaunchedEffect內部時， newValue總是返回0值。 這在keyTwoIsTrue中也發生了同樣的事情，沒有任何內容會滾動:(

請注意，當任何鍵更改時，這意味着我正在借助AnimatedVisibility更改第二Column中項目的可見性

更新 2

我正在添加實時示例，當在列表中添加項目時自動滾動不起作用。

@Preview(showBackground = true, widthDp = 250, heightDp = 320)
@Composable
fun Xyz() {
    Theme {
        var itemClicked by remember { mutableStateOf(0) }
        val favourites = remember { mutableStateListOf<String>() }
        val scrollState = rememberScrollState()
        LaunchedEffect(favourites.size > 0) {
            scrollState.animateScrollTo(scrollState.maxValue)
        }
        Column(
            modifier = Modifier
                .padding(dimensionResource(R.dimen.margin_screen_edge_sides))
                .fillMaxSize()
                .verticalScroll(rememberScrollState()),
        ) {
            Column(
                modifier = Modifier
                    .verticalScroll(scrollState)
                    .weight(1f),
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                favourites.forEach { text ->
                    Text(
                        text = text,
                        fontSize = 30.sp,
                        color = Red
                    )
                }
            }
            Column {
                Button(onClick = {
                    itemClicked++
                    favourites.add("item clicked $itemClicked")
                }) {
                    Text(text = "Add me")
                }
            }
        }
    }
}

當項目添加到列表中時，您可以在視頻中清楚地看到自動滾動不起作用。 它僅在用戶手動操作時滾動。

Answer 1

您可以使用ScrollState來滾動Column的內容。

val scrollState = rememberScrollState()

Column(
   //...
){
    Column(
        Modifier
            .verticalScroll(scrollState)
    //....
}

然后你可以使用你喜歡的邏輯來滾動內容。 例如，當屏幕加載時：

LaunchedEffect(Unit){
    scrollstate.animateScrollTo(scrollstate.maxValue)
}

如果您有一個列表，並且希望在可滾動Column中加載新項目時滾動：

val favourites = remember { mutableStateListOf<String>() }
val scrollState = rememberScrollState()

LaunchedEffect(favourites.size) {
    scrollState.animateScrollTo(scrollState.maxValue)
}