求助：Jetpack Compose中如何让TopAppBar完全隐藏仅保留上滑内容

你用的exitUntilCollapsedScrollBehavior本身就是设计成让TopAppBar折叠到最小高度，不会完全消失。要实现完全隐藏，可以用以下两种方法：

方法一：跟随滚动平滑隐藏TopAppBar #

这种方式让TopAppBar随着滚动逐渐滑出屏幕，过渡更自然：

@Composable
fun Test2() {
    val topAppBarElementColor = MaterialTheme.colors.onPrimary
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
    val density = LocalDensity.current
    // 获取LargeTopAppBar的总高度（转为像素值）
    val topAppBarHeightPx = with(density) { LargeTopAppBarDefaults.Height.toPx() }

    // 计算TopAppBar的垂直偏移：向上偏移最多到负的总高度，实现完全隐藏
    val topAppBarOffset = scrollBehavior.state.offset
        .coerceAtMost(0f)
        .coerceAtLeast(-topAppBarHeightPx)

    Scaffold(
        topBar = {
            LargeTopAppBar(
                title = { Text(text = "TopBar") },
                navigationIcon = { 
                    IconButton(onClick = { /*TODO*/ }) { 
                        Icon(imageVector = Icons.Default.Menu, contentDescription = "菜单") 
                    } 
                },
                modifier = Modifier.offset(y = topAppBarOffset)
            )
        },
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
    ) { innerPadding ->
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
        ) {
            items((1..50).toList()) { item ->
                Text(modifier = Modifier.padding(8.dp), text = "Item $item")
            }
        }
    }
}

关键说明 #

• 替换exitUntilCollapsedScrollBehavior为pinnedScrollBehavior，它会跟踪完整的滚动偏移量
• 通过scrollBehavior.state.offset获取滚动时的偏移值，动态设置TopAppBar的垂直位置
• coerceAtMost和coerceAtLeast用来限制偏移范围，避免TopAppBar偏移过度导致异常

方法二：带动画的显隐切换 #

如果需要明确的显示/隐藏动画效果，可以用AnimatedVisibility：

@Composable
fun Test2() {
    val topAppBarElementColor = MaterialTheme.colors.onPrimary
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
    val density = LocalDensity.current
    // 取TopAppBar高度的一半作为隐藏触发阈值
    val halfTopBarHeight = with(density) { LargeTopAppBarDefaults.Height.toPx() / 2 }

    // 判断是否隐藏：向上滚动且偏移超过半高时触发
    val shouldHideTopBar = scrollBehavior.state.offset < -halfTopBarHeight 
            && scrollBehavior.state.scrollDirection == ScrollDirection.Up

    Scaffold(
        topBar = {
            AnimatedVisibility(
                visible = !shouldHideTopBar,
                enter = slideInVertically(initialOffsetY = { -it }),
                exit = slideOutVertically(targetOffsetY = { -it })
            ) {
                LargeTopAppBar(
                    title = { Text(text = "TopBar") },
                    navigationIcon = { 
                        IconButton(onClick = { /*TODO*/ }) { 
                            Icon(imageVector = Icons.Default.Menu, contentDescription = "菜单") 
                        } 
                    },
                    scrollBehavior = scrollBehavior
                )
            }
        },
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
    ) { innerPadding ->
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
        ) {
            items((1..50).toList()) { item ->
                Text(modifier = Modifier.padding(8.dp), text = "Item $item")
            }
        }
    }
}

关键说明 #

• enterAlwaysScrollBehavior支持下滑时立即显示TopAppBar，符合常见的交互习惯
• 根据滚动方向和偏移量设置显隐条件，配合AnimatedVisibility实现滑入滑出动画
• 可以调整halfTopBarHeight的值来改变触发隐藏的滚动距离阈值

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