CenterAlignedTopAppBar无法滚动，问题出在哪里？

你的代码里有几个关键问题导致滚动行为没生效，逐一修正即可：

• 缺少可滚动的主内容组件：scrollBehavior需要和页面中的可滚动组件（比如LazyColumn、Column(verticalScroll = ...)）联动，必须把滚动行为的nestedScrollConnection绑定到滚动组件上，否则TopAppBar无法感知滚动事件。
• 不必要的remember包裹：TopAppBarDefaults.enterAlwaysScrollBehavior内部已经通过rememberTopAppBarState实现了状态记忆，不需要额外用remember包裹topAppBarScrollBehavior，重复记忆可能导致状态异常。
• 自定义TopBar高度干扰滚动逻辑：你给CenterAlignedTopAppBar设置了固定height(51.dp)和vertical = 16.dp的padding，这会覆盖TopAppBar默认的高度变化逻辑，建议移除这些限制，或者根据滚动状态动态调整。

修改后的完整代码 #

@Composable
fun Screen() {
    // 直接创建滚动行为，内部已处理状态记忆
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(
        rememberTopAppBarState(),
        { true },
        spring(Spring.StiffnessMediumLow),
        rememberSplineBasedDecay()
    )

    Scaffold(
        topBar = {
            ThemedTopBar(scrollBehavior, title = "Select Guests", onBack = {/* TODO */})
        }
    ) { innerPadding ->
        // 添加可滚动内容，并绑定滚动行为的nestedScrollConnection
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
                .nestedScroll(scrollBehavior.nestedScrollConnection),
            contentPadding = PaddingValues(16.dp)
        ) {
            items(50) { index ->
                Text(
                    text = "列表项 $index",
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 8.dp),
                    style = Typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun ThemedTopBar(scrollBehavior: TopAppBarScrollBehavior, title: String, onBack: () -> Unit) {
    CenterAlignedTopAppBar(
        // 保留水平padding，移除固定高度和垂直padding
        modifier = Modifier.padding(horizontal = 9.dp),
        title = {
            Text(
                text = title,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                style = Typography.titleMedium
            )
        },
        navigationIcon = {
            IconButton(
                modifier = Modifier.size(22.dp),
                onClick = onBack,
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_baseline_arrow_back),
                    contentDescription = "Back Button",
                    tint = ThemeBlue
                )
            }
        },
        scrollBehavior = scrollBehavior
    )
}

自定义高度的兼容方案 #

如果确实需要自定义TopBar高度，可以结合滚动状态的折叠比例动态调整样式，比如：

val collapsedFraction = scrollBehavior.state.collapsedFraction
Text(
    text = title,
    style = Typography.titleMedium.copy(
        fontSize = lerp(18.sp, 14.sp, collapsedFraction)
    ),
    alpha = lerp(1f, 0.7f, collapsedFraction)
)

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