使用Jetpack compose实现CollapsingToolbar

Question

我正在尝试使用 Jetpack compose 在详细信息屏幕中实现折叠工具栏：https://github.com/alirezaeiii/Compose-MultiModule-Cache/blob/master/feature_list/src/main/java/com/android/sample /app/feature/list/ui/detail/DetailsScreen.kt

val toolbarHeightPx = with(LocalDensity.current) {
        278.dp.roundToPx().toFloat()
    }
    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(-toolbarHeightPx, 0f)
                return Offset.Zero
            }
        }
    }

    Box(
        Modifier
            .fillMaxSize()
            // attach as a parent to the nested scroll system
            .nestedScroll(nestedScrollConnection)
    ) {
        DetailsContent(
            scrollState = scrollState,
            onNamePosition = { newNamePosition ->
                // Comparing to Float.MIN_VALUE as we are just interested on the original
                // position of name on the screen
                if (detailScroller.namePosition == Float.MIN_VALUE) {
                    detailScroller =
                        detailScroller.copy(namePosition = newNamePosition)
                }
            },
            item = item,
            boxHeight = with(LocalDensity.current) {
                440.dp + toolbarOffsetHeightPx.value.toDp()
            },
            imageHeight = with(LocalDensity.current) {
                420.dp + toolbarOffsetHeightPx.value.toDp()
            },
            sendNotification = sendNotification,
            contentAlpha = { contentAlpha.value }
        )
        DetailsToolbar(
            toolbarState, item.name, pressOnBack,
            contentAlpha = { contentAlpha.value }
        )
    }

这个想法取自向日葵 Google Github 项目。当我们向上滚动时，它会按预期工作，但是当我们向下滚动时，它有时不会完全滚动。当我们向下滚动时，

toolbarOffsetHeightPx

应该变成0，但有时它是负值，导致图像没有完全滚动。它根本不稳定，可能会出现 0 或任何负值。它发生是因为我们有:

boxHeight = with(LocalDensity.current) {
                440.dp + toolbarOffsetHeightPx.value.toDp()
            },
imageHeight = with(LocalDensity.current) {
                420.dp + toolbarOffsetHeightPx.value.toDp()
            }

这是为什么以及如何解决？

Answer 1

我将其报告为问题跟踪器中的一个小错误：https://issuetracker.google.com/issues/238177355

更新

问题现已解决，您可以在这里找到我的解决方案：https://github.com/alirezaeiii/Compose-CollapsingToolbar