Material3技术问题：滚动时如何将MediumTopAppBar转换为CenterAlignedTopAppBar

官方默认的MediumTopAppBar滚动仅会切换为SmallTopAppBar，要实现转CenterAlignedTopAppBar的效果，需手动监听滚动状态并做组件切换+过渡动画，具体操作如下：

步骤1：获取滚动状态与行为 #

先初始化TopAppBar的滚动行为和页面滚动状态：

val scrollBehavior = rememberTopAppBarScrollBehavior()
val scrollState = rememberScrollState()

步骤2：设置切换阈值 #

根据MediumTopAppBar的高度差，定义触发切换的滚动偏移阈值（示例设为60dp，可根据实际布局调整）：

val scrollThreshold = with(LocalDensity.current) { 60.dp.toPx() }
val shouldSwitchToCenter = scrollBehavior.state.offset > scrollThreshold

步骤3：添加平滑过渡动画 #

用Crossfade实现两个TopAppBar的无缝切换，同时绑定滚动行为保证联动：

Crossfade(targetState = shouldSwitchToCenter, animationSpec = tween(300)) { isCenterAligned ->
    if (isCenterAligned) {
        CenterAlignedTopAppBar(
            title = { Text("页面标题") },
            scrollBehavior = scrollBehavior
        )
    } else {
        MediumTopAppBar(
            title = { Text("页面标题") },
            navigationIcon = { IconButton(onClick = { /* 导航操作 */ }) { Icon(Icons.Default.Menu, contentDescription = null) } },
            actions = {
                IconButton(onClick = { /* 搜索操作 */ }) { Icon(Icons.Default.Search, contentDescription = null) }
            },
            scrollBehavior = scrollBehavior
        )
    }
}

步骤4：绑定滚动组件 #

将滚动行为关联到页面的可滚动容器（比如LazyColumn）：

LazyColumn(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    state = scrollState
) {
    // 填充你的列表内容
}

进阶优化 #

如果想要更细腻的过渡效果（比如标题逐步居中、元素渐隐），可以不直接切换组件，而是通过scrollBehavior.state.offset计算滚动进度，手动调整MediumTopAppBar内部元素的位置、透明度等属性，模拟原生压缩动画的过程。

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