尝试收听android jetpack compose中的滚动位置时滚动滞后

Question

我在我的项目中使用 Jetpack compose。 我有一个可滚动的列。 当用户滚动屏幕时，我想将一列显示为顶部栏。 为此，我以这种方式收听滚动的状态：

val scrollState = rememberScrollState()
    Box {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .verticalScroll(scrollState)
        ) {
          ...
          ...
          ...
        }

        TopBar(scrollOffset = (scrollState.value * 0.1))
    }

TopBar 是另一个可组合的：

@Composable
fun HiddenTopBar(scrollOffset: Double, onSearchListener: () -> Unit) {
    val offset = if (-50 + scrollOffset < 0) (-50 + scrollOffset).dp else 0.dp
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)
            .offset(y = offset)
            .background(MaterialTheme.colors.secondary)
            .padding(vertical = MaterialTheme.space.small)
    ) {
        ...
        ...
        ...
    }
}

问题是由于不断的重组，滚动滞后，并且不平滑。 有什么方法可以更有效地实现它吗？

Answer 1

是的，这是因为性能文档中的不断重组。

如果您正在检查从滚动状态派生的状态，例如它是否已滚动，您可以选择 derivedState 但每次更改都需要它，我猜， nestedScrollConnection可能会有所帮助。

此示例可能会帮助您如何实现它

 @Composable
private fun NestedScrollExample() {

    val density = LocalDensity.current
    val statusBarTop = WindowInsets.statusBars.getTop(density)


    val toolbarHeight = 100.dp
    val toolbarHeightPx = with(LocalDensity.current) { toolbarHeight.roundToPx().toFloat() }

    // our offset to collapse toolbar
    val toolbarOffsetHeightPx = remember { mutableStateOf(0f) }

    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                val delta = available.y
                val newOffset = toolbarOffsetHeightPx.value + delta
                toolbarOffsetHeightPx.value =
                    newOffset.coerceIn(-(2 * statusBarTop + toolbarHeightPx), 0f)
                return Offset.Zero
            }
        }
    }
    Box(
        Modifier
            .fillMaxSize()
            // attach as a parent to the nested scroll system
            .nestedScroll(nestedScrollConnection)
    ) {
        Column(
            modifier = Modifier
                .padding(
                    PaddingValues(
                        top = toolbarHeight + 8.dp,
                        start = 8.dp,
                        end = 8.dp,
                        bottom = 8.dp
                    )
                )
                .verticalScroll(rememberScrollState())
            ,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            Box(modifier = Modifier
                .fillMaxWidth()
                .height(2000.dp))
        }
        TopAppBar(modifier = Modifier
            .height(toolbarHeight)
            .offset { IntOffset(x = 0, y = toolbarOffsetHeightPx.value.roundToInt()) },
            elevation = 2.dp,
            backgroundColor = Color.White,
            title = { Text("toolbar offset is ${toolbarOffsetHeightPx.value}") })
    }
}