使用 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/Det​​ailsS​​creen.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 }
        )
    }

这个想法来自向日葵谷歌 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