Jetpack Compose：文本框自动滚动时PinnedScrollBehavior不改变顶栏颜色

问题出在TextField自动聚焦触发的内容滚动没有被pinnedScrollBehavior的嵌套滚动连接捕获，导致TopAppBar的滚动状态未更新，颜色也就不会变化。可以通过手动同步内容滚动状态到TopAppBar的状态来解决。

针对Column（verticalScroll）的解决方案 #

1. 单独声明内容的滚动状态scrollState
2. 通过LaunchedEffect监听滚动状态变化，同步到TopAppBar的滚动偏移量
3. 限制滚动偏移量在TopAppBar高度范围内，符合pinned模式的预期行为

修改后的完整代码：

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
val scrollState = rememberScrollState()
val topAppBarHeight = TopAppBarDefaults.centerAlignedTopAppBarHeight
val density = LocalDensity.current

// 同步内容滚动状态到TopAppBarState
LaunchedEffect(scrollState) {
    snapshotFlow { scrollState.value }
        .map { it.toFloat() }
        .map { scrollOffset ->
            with(density) {
                scrollOffset.coerceIn(0f, topAppBarHeight.toPx())
            }
        }
        .collect { scrollOffset ->
            scrollBehavior.state.scrollOffset = scrollOffset
        }
}

Scaffold(
    contentWindowInsets = EmptyWindowInsets,
    modifier = Modifier
        .fillMaxHeight()
        .nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        StandardTopAppBar(scrollBehavior = scrollBehavior)
    },
    content = { innerPadding ->
        Column(
            Modifier
                .padding(innerPadding)
                .horizontalPadding(10.dp)
                .fillMaxHeight()
                .verticalScroll(scrollState), // 使用统一的scrollState
            verticalArrangement = Arrangement.spacedBy(10.dp),
        ) {
            // 你的内容（包含大型TextField等）
        }
    }
)

针对LazyColumn的解决方案 #

如果使用LazyColumn，逻辑类似，只是需要通过LazyListState计算总滚动偏移：

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
val lazyListState = rememberLazyListState()
val topAppBarHeight = TopAppBarDefaults.centerAlignedTopAppBarHeight
val density = LocalDensity.current
// 假设列表项高度固定，根据实际情况调整
val itemHeight = 56.dp

LaunchedEffect(lazyListState) {
    snapshotFlow {
        // 计算总滚动偏移：已滚动的列表项高度 + 当前可见项的偏移
        lazyListState.firstVisibleItemScrollOffset +
                lazyListState.firstVisibleItemIndex * with(density) { itemHeight.toPx().toInt() }
    }
    .map { it.toFloat() }
    .map { scrollOffset ->
        with(density) {
            scrollOffset.coerceIn(0f, topAppBarHeight.toPx())
        }
    }
    .collect { scrollOffset ->
        scrollBehavior.state.scrollOffset = scrollOffset
    }
}

Scaffold(
    contentWindowInsets = EmptyWindowInsets,
    modifier = Modifier
        .fillMaxHeight()
        .nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        StandardTopAppBar(scrollBehavior = scrollBehavior)
    },
    content = { innerPadding ->
        LazyColumn(
            state = lazyListState,
            modifier = Modifier.fillMaxHeight(),
            contentPadding = innerPadding,
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            // 你的列表内容
        }
    }
)

原理说明 #

自动滚动（如TextField聚焦滚动）只会更新内容自身的滚动状态，但不会触发嵌套滚动连接的回调。通过snapshotFlow监听滚动状态的变化，手动将滚动偏移同步到TopAppBarState，就能让TopAppBar根据滚动位置正确更新颜色状态。

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