Jetpack Compose固定TopBar与NavBar实现内容切换导航

核心思路 #

把包含TopAppBar、左侧导航栏的页面框架只在一个主容器中实现，不再给每个内容页面单独套Scaffold。通过维护一个「当前选中页面」的状态，点击导航栏时仅更新这个状态，从而切换中间的内容区域，固定框架部分始终保持不变。

具体实现步骤 #

1. 定义页面枚举类 #

用来标识不同的内容页面，方便统一管理：

enum class MainScreen {
    Home, Profile, Settings // 根据你的实际页面需求修改
}

2. 实现主容器页面 #

将固定的TopAppBar、左侧导航栏、Drawer都放在这里，中间内容根据当前选中页面动态切换：

@Composable
fun MainContainer() {
    // 维护当前选中的页面状态
    var currentScreen by remember { mutableStateOf(MainScreen.Home) }

    Scaffold(
        topBar = { TopBar() } // 固定的TopAppBar
    ) { innerPadding ->
        Row(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.White)
                .padding(innerPadding) // 必须添加Scaffold的内边距，避免内容被TopBar遮挡
        ) {
            // 固定的左侧导航栏，点击时更新选中页面
            NavigationBar(
                modifier = Modifier.weight(.2f),
                currentScreen = currentScreen,
                onScreenSelected = { currentScreen = it }
            )
            Spacer(modifier = Modifier.width(16.dp))
            
            // 固定的Drawer组件（如果不需要随页面变化，直接保留在这里）
            Drawer(
                modifier = Modifier.weight(.2f)
                // 如果Drawer需要和当前页面交互，可传递currentScreen或回调函数
            )
            Spacer(modifier = Modifier.width(16.dp))
            
            // 动态切换的中间内容区域
            Box(modifier = Modifier.weight(.6f)) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(16.dp),
                    verticalArrangement = Arrangement.Top,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    when(currentScreen) {
                        MainScreen.Home -> HomeContentScreen()
                        MainScreen.Profile -> ProfileContentScreen()
                        MainScreen.Settings -> SettingsContentScreen()
                    }
                }
            }
        }
    }
}

3. 修改NavigationBar组件 #

移除原来依赖navController的导航逻辑，改为通过回调更新主容器的页面状态：

@Composable
fun NavigationBar(
    modifier: Modifier = Modifier,
    currentScreen: MainScreen,
    onScreenSelected: (MainScreen) -> Unit
) {
    Column(modifier = modifier) {
        // 示例导航选项，根据你的实际UI调整
        Text(
            text = "首页",
            modifier = Modifier
                .fillMaxWidth()
                .clickable { onScreenSelected(MainScreen.Home) }
                .background(if(currentScreen == MainScreen.Home) Color.LightGray else Color.Transparent)
                .padding(horizontal = 16.dp, vertical = 12.dp),
            textAlign = TextAlign.Center
        )
        Text(
            text = "个人中心",
            modifier = Modifier
                .fillMaxWidth()
                .clickable { onScreenSelected(MainScreen.Profile) }
                .background(if(currentScreen == MainScreen.Profile) Color.LightGray else Color.Transparent)
                .padding(horizontal = 16.dp, vertical = 12.dp),
            textAlign = TextAlign.Center
        )
        // 更多导航选项...
    }
}

4. 简化内容页面 #

原来的ContentScreen（现在改为HomeContentScreen、ProfileContentScreen等）不需要再套Scaffold，只需要实现自身的内容逻辑即可：

@Composable
fun HomeContentScreen() {
    // 首页内容，比如列表、文本等
    Text(text = "首页内容区域")
}

@Composable
fun ProfileContentScreen() {
    // 个人中心内容
    Text(text = "个人中心内容区域")
}

原有问题原因 #

你之前给每个内容页面都单独使用了Scaffold，每次通过navController导航时，整个页面（包括TopAppBar、左侧导航栏）都会被重新组合渲染，所以看起来是完整页面跳转。现在的方式把固定框架抽离到主容器，仅动态切换中间内容，避免了不必要的组件重绘，同时实现了框架固定的效果。

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