(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()
   }
}