Jetpack Compose中TopAppBar滚动行为的跨屏幕管理问题咨询

1. 使用单个共享TopAppBar时，为各屏幕设置不同的ScrollBehavior #

可以实现，核心是为每个屏幕单独维护ExitUntilCollapsedScrollBehavior实例，在屏幕切换时动态切换共享TopAppBar绑定的实例。

实现思路 #

• 通过ViewModel存储所有屏幕的ScrollBehavior，以屏幕唯一标识（如导航路由）作为Key管理
• 监听导航栈变化，实时更新共享TopAppBar使用的当前屏幕ScrollBehavior
• 每个屏幕的可滚动组件（如LazyColumn）关联自身对应的ScrollBehavior

代码示例 #

// 管理ScrollBehavior的ViewModel
class ScrollBehaviorViewModel : ViewModel() {
    private val scrollBehaviors = mutableMapOf<String, ExitUntilCollapsedScrollBehavior>()

    fun getScrollBehavior(screenKey: String): ExitUntilCollapsedScrollBehavior {
        return scrollBehaviors.getOrPut(screenKey) {
            ExitUntilCollapsedScrollBehavior()
        }
    }
}

// 包含共享TopAppBar的主界面
@Composable
fun MainScreen(navController: NavHostController) {
    val scrollBehaviorViewModel = viewModel<ScrollBehaviorViewModel>()
    val currentBackStackEntry by navController.currentBackStackEntryAsState()
    val currentScreenKey = currentBackStackEntry?.destination?.route ?: ""
    val currentScrollBehavior = scrollBehaviorViewModel.getScrollBehavior(currentScreenKey)

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("共享标题栏") },
                scrollBehavior = currentScrollBehavior
            )
        }
    ) { padding ->
        NavHost(navController = navController, startDestination = "screen1") {
            composable("screen1") {
                ScreenContent(
                    scrollBehavior = scrollBehaviorViewModel.getScrollBehavior("screen1"),
                    padding = padding
                )
            }
            composable("screen2") {
                ScreenContent(
                    scrollBehavior = scrollBehaviorViewModel.getScrollBehavior("screen2"),
                    padding = padding
                )
            }
        }
    }
}

// 通用屏幕内容组件
@Composable
fun ScreenContent(scrollBehavior: ExitUntilCollapsedScrollBehavior, padding: PaddingValues) {
    LazyColumn(
        modifier = Modifier.padding(padding),
        state = scrollBehavior.state
    ) {
        items(100) {
            Text("列表项 $it", modifier = Modifier.fillMaxWidth().padding(16.dp))
        }
    }
}

2. 使用独立TopAppBar时，维护每个屏幕的ScrollBehavior状态 #

需要将ScrollBehavior的状态与屏幕生命周期绑定，避免返回时丢失状态，推荐两种方案：

方案一：用rememberSaveable保存状态 #

通过自定义状态转换器，将ExitUntilCollapsedScrollBehavior的核心状态（ScrollState）存入rememberSaveable，确保屏幕重建或返回时状态保留：

@Composable
fun ScreenWithIndependentTopBar() {
    val scrollBehavior = rememberSaveable(
        stateSaver = Saver<ExitUntilCollapsedScrollBehavior, ScrollState>(
            save = { it.scrollState },
            restore = { ExitUntilCollapsedScrollBehavior(it) }
        )
    ) {
        ExitUntilCollapsedScrollBehavior()
    }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("独立标题栏") },
                scrollBehavior = scrollBehavior
            )
        }
    ) { padding ->
        LazyColumn(
            modifier = Modifier.padding(padding),
            state = scrollBehavior.state
        ) {
            items(100) {
                Text("列表项 $it", modifier = Modifier.fillMaxWidth().padding(16.dp))
            }
        }
    }
}

方案二：用屏幕专属ViewModel持有ScrollBehavior #

每个屏幕创建专属ViewModel，在ViewModel中初始化ScrollBehavior——ViewModel会随屏幕栈保留，返回时状态不会丢失：

// 屏幕专属ViewModel
class ScreenViewModel : ViewModel() {
    val scrollBehavior = ExitUntilCollapsedScrollBehavior()
}

@Composable
fun ScreenWithIndependentTopBar() {
    val viewModel = viewModel<ScreenViewModel>()
    val scrollBehavior = viewModel.scrollBehavior

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("独立标题栏") },
                scrollBehavior = scrollBehavior
            )
        }
    ) { padding ->
        LazyColumn(
            modifier = Modifier.padding(padding),
            state = scrollBehavior.state
        ) {
            items(100) {
                Text("列表项 $it", modifier = Modifier.fillMaxWidth().padding(16.dp))
            }
        }
    }
}

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