Jetpack Compose页面切换时固定屏幕元素的实现方法

核心思路 #

别把固定元素塞进NavHost的页面目的地里，直接把它作为NavHost的同级元素放在同一个父布局中。这样NavHost切换页面时，固定元素完全不受导航逻辑干扰，全程保持显示状态。

基础代码实现 #

@Composable
fun MainScreen(navController: NavHostController) {
    // 父布局：同时承载固定元素和导航容器
    Box(modifier = Modifier.fillMaxSize()) {
        // 1. 固定元素：可根据需求调整层级（比如放在最上层或最下层）
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(64.dp)
                .background(Color.Black),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "固定黑色栏", color = Color.White)
        }

        // 2. NavHost：只负责切换可变页面，注意给固定元素留出空间
        NavHost(
            navController = navController,
            startDestination = "screen1",
            modifier = Modifier.padding(top = 64.dp) // 避开顶部固定栏
        ) {
            composable("screen1") {
                Screen1(navController)
            }
            composable("screen2") {
                Screen2(navController)
            }
        }
    }
}

// 第一屏
@Composable
fun Screen1(navController: NavHostController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(onClick = { navController.navigate("screen2") }, colors = ButtonDefaults.buttonColors(Color.Blue)) {
            Text("跳转到第二屏")
        }
    }
}

// 第二屏
@Composable
fun Screen2(navController: NavHostController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(onClick = { navController.popBackStack() }, colors = ButtonDefaults.buttonColors(Color.Red)) {
            Text("返回第一屏")
        }
    }
}

进阶：固定元素和页面交互的情况 #

如果固定元素需要和当前页面的数据联动（比如显示当前页面标题），用共享ViewModel就能搞定：

1. 创建共享ViewModel

class SharedViewModel : ViewModel() {
    val currentTitle = MutableStateFlow("默认标题")
}

2. 固定元素监听状态，页面更新状态

@Composable
fun MainScreen(navController: NavHostController, sharedViewModel: SharedViewModel = viewModel()) {
    Box(modifier = Modifier.fillMaxSize()) {
        // 固定元素：显示共享的标题
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(64.dp)
                .background(Color.Black),
            contentAlignment = Alignment.Center
        ) {
            Text(text = sharedViewModel.currentTitle.collectAsState().value, color = Color.White)
        }

        NavHost(
            navController = navController,
            startDestination = "screen1",
            modifier = Modifier.padding(top = 64.dp)
        ) {
            composable("screen1") {
                Screen1(navController, sharedViewModel)
            }
            composable("screen2") {
                Screen2(navController, sharedViewModel)
            }
        }
    }
}

@Composable
fun Screen1(navController: NavHostController, viewModel: SharedViewModel) {
    LaunchedEffect(Unit) {
        viewModel.currentTitle.emit("第一屏")
    }
    // 页面原有内容...
}

@Composable
fun Screen2(navController: NavHostController, viewModel: SharedViewModel) {
    LaunchedEffect(Unit) {
        viewModel.currentTitle.emit("第二屏")
    }
    // 页面原有内容...
}

AnimatedNavHost的适配 #

用AnimatedNavHost时，直接替换原有的NavHost就行，固定元素依然放在外部，页面过渡动画只会作用于NavHost内部内容，不会影响固定元素：

AnimatedNavHost(
    navController = navController,
    startDestination = "screen1",
    modifier = Modifier.padding(top = 64.dp)
) {
    composable(
        "screen1",
        enterTransition = { slideInHorizontally(initialOffsetX = { it }) },
        exitTransition = { slideOutHorizontally(targetOffsetX = { -it }) }
    ) {
        Screen1(navController)
    }
    composable(
        "screen2",
        enterTransition = { slideInHorizontally(initialOffsetX = { -it }) },
        exitTransition = { slideOutHorizontally(targetOffsetX = { it }) }
    ) {
        Screen2(navController)
    }
}

方案原理 #

NavHost本质是根据导航目的地渲染对应Composable的容器，把固定元素抽离到NavHost外部，就脱离了导航栈的管理，自然不会随页面切换销毁重建，刚好满足“始终固定”的需求。

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