嘗試收聽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}") })
    }
}