如何使用 Jetpack Compose + Navigation 处理后退导航(无片段)

Thi*_*eep 20 navigation android android-jetpack-compose dagger-hilt jetpack-compose-navigation

我正在尝试导航,比如说从入门到仪表板及其他,并在用户点击仪表板后弹出入门,但仍然通过“后退操作”,我最终再次入门。

这是示例代码:

@AndroidEntryPoint
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainUI()
        }
    }
}
Run Code Online (Sandbox Code Playgroud)
@Composable
fun MainUI() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "onboarding"
    ) {
        composable("onboarding") {
            Column {
                Text("I am on onboarding")
                Button(onClick = {
                    navController.navigate("dashboard") {
                        popUpTo("dashboard") // I want to get rid of onboarding here
                    }
                }) {
                    Text("go to dashboard")
                }
            }
        }
        composable("dashboard") {
            Column {
                Text("I am on dashboard")
                Button(onClick = {
                    navController.navigate("detail")
                }) {
                    Text("go to detail")
                }
            }
        }
        composable("detail") {
            Text("I am on detail")
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

这也行不通

navController.navigate("dashboard") {
    popUpTo("dashboard") {
            inclusive = true // no difference
        }

// ....

    popUpTo("onboarding") // also nothing

// ....

    popUpTo("onboarding") {
            inclusive = true // this crashes -> NavGraph cannot be cast to ComposeNavigator$Destination
        }

}

Run Code Online (Sandbox Code Playgroud)

由于某种原因,这种方法有效,因此仪表板被驳回,从细节来看,我最终进入了新手入门阶段

navController.navigate("detail") {
     popUpTo("dashboard") {
            inclusive = true
     }
}
Run Code Online (Sandbox Code Playgroud)

Jam*_*guo 35

我发现我的解决方案非常简单,如果我错了,请赐教。

navController.popBackStack()
Run Code Online (Sandbox Code Playgroud)


小智 15

您可以使用 BackHandler链接

@Composable
    fun TestScreen() {
        BackHandler {
             // code
            // example - activity.finish()
        }
    }
Run Code Online (Sandbox Code Playgroud)


Thi*_*eep 1

好吧,我自己找到了工作解决方案,仍然不确定是否需要这个“样板代码”:( 但这按预期工作,意味着“页面”一旦导航就会被忽略。

NavHost(
        navController = navController,
        startDestination = "onboarding"
    ) {
        navigation(
            startDestination = "onboardingUI",
            route = "onboarding"
        ) {
            composable("onboardingUI") {
                Column {
                    Text("I am on onboarding")
                    Button(onClick = {
                        navController.navigate("dashboard"){
                            popUpTo("onboarding")
                        }
                    }) {
                        Text("go to dashboard")
                    }
                }
            }
        }
        navigation(startDestination = "dashboardUI", route = "dashboard") {
            composable("dashboardUI") {
                Column {
                    Text("I am on dashboard")
                    Button(onClick = {
                        navController.navigate("detail"){
                            popUpTo("dashboard")
                        }
                    }) {
                        Text("go to detail")
                    }
                }
            }
        }
        navigation(startDestination = "detailUI", route = "detail") {
            composable("detailUI") {
                Text("I am on detail")
            }
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

注意:可组合项的路由起始目的地又名不能相同

  • 你只需要深思熟虑;) (2认同)