非LazyColumn场景下Scaffold中TopAppBarScrollBehavior失效问题

要让TopAppBar和使用verticalScroll的常规Column实现滚动联动（收缩/展开），需要做以下两处关键修改：

1. 正确初始化并关联滚动行为 #

首先，使用rememberTopAppBarScrollBehavior创建滚动行为实例，根据需求选择合适的滚动类型（比如pinnedScrollBehavior实现滚动到一定距离后收缩TopAppBar，enterAlwaysScrollBehavior实现上滑立即展开）。同时让Column的滚动状态与TopAppBar的滚动行为共享。

2. 给Column添加嵌套滚动连接 #

常规Column的verticalScroll不会自动将滚动事件传递给TopAppBar的滚动行为，需要通过nestedScroll修饰符绑定scrollBehavior.nestedScrollConnection，让滚动事件能被TopAppBar捕获处理。

修改后的完整代码 #

val scrollBehavior = rememberTopAppBarScrollBehavior(
    TopAppBarDefaults.pinnedScrollBehavior() // 根据需求选择滚动类型
)

Scaffold(
    modifier = Modifier
        .fillMaxSize()
        .background(backgroundColor),
    topBar = {
        TopAppBar(
            title = {
                Text(
                    text = "About",
                    color = colorResource(id = R.color.black)
                )
            },
            colors = TopAppBarDefaults.smallTopAppBarColors(
                containerColor = Color.Red,
                titleContentColor = Color.Black,
            ),
            modifier = Modifier.fillMaxWidth(),
            navigationIcon = {
                Button(onClick = { }) {
                    Text(text = "B1")
                }
            }, 
            actions = {
                Button(onClick = {}) {
                    Text(text = "B2")
                }
            },
            scrollBehavior = scrollBehavior
        )
    },
    content = { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .nestedScroll(scrollBehavior.nestedScrollConnection) // 关键：添加嵌套滚动连接
                .verticalScroll(scrollBehavior.state) // 共享滚动状态
        ) {
            // Header
            Text(
                text = "Header",
                modifier = Modifier
                    .padding(horizontal = 30.dp)
                    .wrapContentWidth()
                    .semantics { heading() },
                fontSize = 26.sp,
                color = colorResource(id = R.color.black)
            )

            // 中间的其他组件（示例添加重复项便于测试滚动）
            repeat(20) {
                Text(
                    text = "Item $it",
                    modifier = Modifier.padding(30.dp),
                    fontSize = 18.sp
                )
            }

            Text(
                text = "Some text",
                modifier = Modifier
                    .padding(start = 30.dp, end = 30.dp, top = 38.dp)
                    .wrapContentWidth()
                    .semantics { heading() },
                fontSize = 21.sp,
                color = colorResource(id = R.color.black)
            )
        }
    }
)

关键修改点说明 #

• 滚动行为初始化：将scrollBehavior的定义移到Scaffold外部，使用rememberTopAppBarScrollBehavior创建，并指定滚动类型（pinned或enterAlways）。
• 嵌套滚动连接：给Column添加.nestedScroll(scrollBehavior.nestedScrollConnection)，这是让TopAppBar感知Column滚动的核心。
• 共享滚动状态：将Column的verticalScroll参数从单独的rememberScrollState()替换为scrollBehavior.state，确保两者使用同一个滚动状态，联动更顺畅。

原代码不生效的原因是：LazyColumn默认实现了嵌套滚动接口，能自动和TopAppBar的滚动行为联动，但常规Column的verticalScroll没有这个默认逻辑，必须手动绑定嵌套滚动连接才能让滚动事件传递给TopAppBar。

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