使用 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