Jetpack Compose自定义TopBar实现折叠展开效果可行性咨询

你当前提供的代码可以实现和目标截图外观一致的静态TopBar效果，但无法直接实现你需要的滚动折叠/展开联动效果，具体问题和改造方案如下：

现有代码的不足 #

• 你虽然定义了toolbarOffsetHeightPx偏移变量，但没有绑定页面滚动事件，变量值不会动态变化，不会产生折叠动效
• 当前仅用到了基础的TopAppBar组件，没有接入滚动联动逻辑

最简改造方案 #

不需要完全从零开发自定义导航栏，可以直接用官方提供的滚动联动能力实现折叠效果，步骤如下：

1. 给页面的可滚动容器添加滚动状态监听，以LazyColumn为例：

val lazyListState = rememberLazyListState()

2. 计算TopBar的动态偏移量：

val toolbarHeight = 52.dp
val toolbarHeightPx = with(LocalDensity.current) { toolbarHeight.toPx() }
val toolbarOffset = remember {
    derivedStateOf {
        // 向上滚动时TopBar逐步上移直到完全隐藏，滚动回顶部时自动展示
        if (lazyListState.firstVisibleItemIndex > 0) -toolbarHeightPx
        else (-lazyListState.firstVisibleItemScrollOffset).coerceAtLeast(-toolbarHeightPx)
    }
}

3. 把toolbarOffset值传入你写的TopNavBar组件替换原来的静态toolbarOffsetHeightPx变量即可生效。

如果需要更丝滑的折叠效果（比如标题缩放、背景渐变），可以直接用官方封装好的TopAppBarScrollBehavior，性能和动效更优，示例逻辑：

// 初始化滚动行为，enterAlways模式是向上滚动立即折叠TopBar
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
// 替换你原来的TopAppBar定义，增加scrollBehavior参数
TopAppBar(
    modifier = Modifier.height(toolbarHeight),
    scrollBehavior = scrollBehavior,
    // 剩下的title、navigationIcon、actions等参数和你原来的代码完全一致
)
// 最后给页面的可滚动容器增加嵌套滚动修饰符即可自动联动
LazyColumn(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    state = lazyListState
) {
    // 页面内容
}

内容的提问来源于stack exchange，提问作者Bubbly