Android Studio Jetpack Compose导航页面重叠问题排查求助

问题描述 #

使用Jetpack Compose学习导航功能时，导航能跳转到目标页面，但起始页面的内容会与目标页面内容重叠，两个页面的文本叠加显示。

原代码 #

MainScreen.kt #

@Composable
fun MainScreen() {
    val navController:NavHostController = rememberNavController()
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center)
    {
        Text(text = "Ini Halaman Utama",
            color = Color.Blue,
            textAlign = TextAlign.Center)
    }
    SetupNavGraph(navController = navController)
    Search(navController = navController)
}

MainActivity.kt #

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.example.latihannavigation.ui.theme.LatihanNavigationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LatihanNavigationTheme {
                MainScreen()
            }
        }
    }
}

NavGraph.kt #

@Composable
fun SetupNavGraph(navController: NavHostController){
    NavHost(navController = navController,
        startDestination =Screen.Search.route){
            composable(route = Screen.Search.route) {
                MainScreen()
        }
            composable(route = Screen.Setting.route){
                Pengaturan(navController = navController)
            }
    }
}

Screen密封类 #

package com.example.latihannavigation

sealed class Screen(val route:String){
    object Search: Screen(route = "Screen_Home")
    object Setting: Screen(route = "Screen_Setting")
}

SearchBar.kt #

@Composable
fun Search(navController: NavHostController){
    Box(modifier = Modifier
        .fillMaxSize()
        ){
            Icon(imageVector = Icons.Default.Settings,
                contentDescription = "Masuk Ke Menu Settings",
                tint = Color.Black,
                modifier = Modifier.clickable {
                    navController.navigate(route = Screen.Setting.route)
                })
    }
}

Setting.kt #

@Composable
fun Pengaturan(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center)
    {
        Text(text = "Ini Adalah Halaman Pengaturan", color = Color.Red)
    }
    Icon(imageVector = Icons.Default.ArrowBack,
        contentDescription = "Kembali Ke Halaman Utama",
        tint = Color.Red,
        modifier = Modifier
            .clickable {navController.navigate(route = Screen.Search.route)})
}

问题分析 #

1. 层级渲染错误：MainScreen直接渲染了首页文本，且与NavHost、Search组件同级，导致这些内容始终显示在导航页面上层，不会随导航切换消失。
2. 嵌套NavHost：NavGraph将MainScreen作为Screen.Search.route的目的地，而MainScreen内部又调用SetupNavGraph，形成循环嵌套，导航逻辑混乱。
3. 返回逻辑错误：Pengaturan页面用navigate返回首页，会在导航栈中新增页面实例，而非回到上一页。

修复方案 #

1. 抽离首页内容为独立组件 #

新建HomeScreen.kt，整合首页内容与操作按钮：

@Composable
fun HomeScreen(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        // 首页文本
        Text(
            text = "Ini Halaman Utama",
            color = Color.Blue,
            textAlign = TextAlign.Center,
            modifier = Modifier.align(Alignment.Center)
        )
        // 设置按钮
        Icon(
            imageVector = Icons.Default.Settings,
            contentDescription = "Masuk Ke Menu Settings",
            tint = Color.Black,
            modifier = Modifier
                .align(Alignment.TopEnd)
                .padding(16.dp)
                .clickable {
                    navController.navigate(Screen.Setting.route)
                }
        )
    }
}

2. 重构MainScreen #

让MainScreen仅负责初始化导航与加载导航图：

@Composable
fun MainScreen() {
    val navController = rememberNavController()
    SetupNavGraph(navController = navController)
}

3. 修正NavGraph #

将Screen.Search.route的目的地改为HomeScreen，避免嵌套：

@Composable
fun SetupNavGraph(navController: NavHostController){
    NavHost(
        navController = navController,
        startDestination = Screen.Search.route
    ){
        composable(route = Screen.Search.route) {
            HomeScreen(navController = navController)
        }
        composable(route = Screen.Setting.route){
            Pengaturan(navController = navController)
        }
    }
}

4. 修复返回按钮逻辑 #

在Pengaturan页面使用popBackStack()实现正确返回：

@Composable
fun Pengaturan(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        Text(
            text = "Ini Adalah Halaman Pengaturan",
            color = Color.Red,
            modifier = Modifier.align(Alignment.Center)
        )
        Icon(
            imageVector = Icons.Default.ArrowBack,
            contentDescription = "Kembali Ke Halaman Utama",
            tint = Color.Red,
            modifier = Modifier
                .align(Alignment.TopStart)
                .padding(16.dp)
                .clickable {
                    navController.popBackStack()
                }
        )
    }
}

关键说明 #

• NavHost是导航容器，所有需要切换的页面必须作为NavHost中的composable目的地，根组件不要直接渲染页面内容。
• 禁止NavHost嵌套，单个导航流程仅需一个根NavHost。
• 返回上一页优先使用popBackStack()，仅在跳转到非层级页面时使用navigate()。

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