如何消除自定义NestedScrollConnection实现的折叠App Bar留白？

你遇到的问题是：自定义NestedScrollConnection实现App Bar折叠时，滚动后App Bar上移，但原位置留下空白，背景未跟随上移。这是因为Scaffold的topBar参数会为App Bar预留固定高度的空间，单纯使用offset只是移动App Bar的视觉位置，但其占据的空间并未改变，所以会出现空白区域。

错误原因 #

你的代码里，TopAppBar放在Scaffold的topBar中，Scaffold会基于TopAppBar的原始高度在顶部预留空间。当你用offset将App Bar上移后，预留的空间依然存在，导致空白。

解决方法 #

方案1：放弃Scaffold的topBar参数，自行控制布局 #

将App Bar和内容放在Scaffold的content中，通过调整内容的顶部内边距，让内容跟随App Bar的折叠而移动，同时App Bar的背景会自然覆盖原本的空白区域。

修改后的UI代码：

val density = LocalDensity.current

val appBarMaxHeight = with(density) { 70.dp.roundToPx() }

// 修正构造参数传递错误（原代码传了appBarMaxHeightPx，应为appBarMaxHeight）
val connection = remember(appBarMaxHeight) {
    CollapsingAppBarNestedScrollConnection(appBarMaxHeight)
}

Scaffold(
    modifier = Modifier
        .fillMaxSize()
        .nestedScroll(connection)
) { innerPadding ->
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding)
    ) {
        // 内容区域：根据App Bar的偏移动态调整顶部内边距
        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(
                top = with(density) { (appBarMaxHeight + connection.appBarOffset).toDp() }
            )
        ) {
            items(100) {
                Text("列表项 $it", modifier = Modifier.padding(16.dp))
            }
        }

        // App Bar：放在内容上方，通过offset实现折叠效果
        TopAppBar(
            title = { Text("Top App Bar") },
            modifier = Modifier.offset { IntOffset(0, connection.appBarOffset) }
        )
    }
}

方案2：动态调整App Bar的高度（适配Scaffold的topBar） #

如果坚持使用Scaffold的topBar，可以通过动态修改TopAppBar的高度，让Scaffold预留的空间随App Bar折叠而缩小，避免空白：

修改后的UI代码：

val density = LocalDensity.current

val appBarMaxHeight = with(density) { 70.dp.roundToPx() }
val connection = remember(appBarMaxHeight) {
    CollapsingAppBarNestedScrollConnection(appBarMaxHeight)
}

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("Top App Bar") },
            modifier = Modifier
                .offset { IntOffset(0, connection.appBarOffset) }
                // 动态调整高度：折叠时高度 = 最大高度 + 偏移量（偏移量为负，高度减小）
                .height(with(density) { (appBarMaxHeight + connection.appBarOffset).toDp() })
        )
    },
    modifier = Modifier
        .fillMaxSize()
        .nestedScroll(connection)
) { innerPadding ->
    LazyColumn(
        modifier = Modifier.fillMaxSize().padding(innerPadding),
        contentPadding = PaddingValues(top = 8.dp)
    ) {
        items(100) {
            Text("列表项 $it", modifier = Modifier.padding(16.dp))
        }
    }
}

额外修正 #

你的原始代码中存在参数传递错误：创建CollapsingAppBarNestedScrollConnection时，传入的是appBarMaxHeightPx，但变量名是appBarMaxHeight，需要修正为一致。

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