(Jetpack Compose) 如何正確計算視差？

Question

我需要做一個視差實現，此外，當用戶向下滾動時，動作欄應該會出現。 我正在關注本教程：

https://proandroiddev.com/parallax-in-jetpack-compose-bf521244f49

有一個實現：

@Composable
fun HeaderBarParallaxScroll() {
    val scrollState = rememberScrollState()
    Box {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .verticalScroll(scrollState),
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(500.dp)
                    .background(Color.White)
                    .graphicsLayer {
                        Log.e(
                            "scroll",
                            "${scrollState.value.toFloat()}, max = ${scrollState.maxValue}, ratio = ${(scrollState.value.toFloat() / scrollState.maxValue)}"
                        )
                        alpha = 1f - ((scrollState.value.toFloat() / scrollState.maxValue) * 1.5f)
                        translationY = 0.5f * scrollState.value
                    },
                contentAlignment = Alignment.Center
            ) {
                Image(
                    painterResource(id = R.drawable.ic_launcher_foreground),
                    contentDescription = "tiger parallax",
                    contentScale = ContentScale.Crop,
                    modifier = Modifier.fillMaxSize()
                )
            }

            repeat(100) {
                Text(
                    text = "MyText",
                    modifier = Modifier.background(
                        Color.White
                    ),
                    style = TextStyle(
                        color = Color.Red,
                        fontSize = 24.sp
                    )
                )
            }
        }

        Box(
            modifier = Modifier
                .alpha(min(1f, (scrollState.value.toFloat() / scrollState.maxValue) * 5f))
                .fillMaxWidth()
                .height(60.dp)
                .background(Color.Yellow),
            contentAlignment = Alignment.CenterStart
        ) {
            Text(
                text = "Header bar",
                modifier = Modifier.padding(horizontal = 16.dp),
                style = TextStyle(
                    fontSize = 24.sp,
                    fontWeight = FontWeight.W900,
                    color = Color.Black
                )
            )
        }
    }
}

看起來一切都按預期工作，但是，如果我更改此塊中的值repeat

repeat(100) {
                Text(
                    text = "MyText",
                    modifier = Modifier.background(
                        Color.White
                    ),
                    style = TextStyle(
                        color = Color.Red,
                        fontSize = 24.sp
                    )
                )
            }

而不是 100 -> 1000 視差工作更慢，為了讓操作欄出現，我需要像列表的一半一樣滾動，所以不同的視差響應取決於內容中有多少項目（高度）。 例如：如果它是 100，它會按預期工作，但是，如果它是 1000，它會慢得多......

如何讓它正常工作？

Answer 1

您應該使用 LazyColumn 而不是帶有 verticalScroll 的 Column。 當您的列進入作文時，所有子項（1000 個文本）也進入作文。 您的屏幕上有 1000 條文本，即使其中大部分不可見。 您可以查看此答案以查看可組合函數何時進入組合。

另一方面，LazyList subcomposes（僅撰寫可見項目）是 RecyclerView for Compose 的對應物。 如果您按以下方式更改重復，您很可能不會遇到任何性能問題。

LazyColumn() {
   items(1000){
      Text()
   }
}