繁体   English   中英

如何从嵌套的可组合 Jetpack Compose 访问 NavHostController

[英]How to acess NavHostController from nested composable Jetpack Compose

假设我的应用程序看起来像这样

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(navController, startDestination = Route.Home.route) {
        /// other composes
        composable("Home") { HomeCompose(navController) }
    }
}

@Composable
fun HomeCompose(navController: NavHostController) {
    ChildCompose(navController)
}

@Composable
fun ChildCompose(navController: NavHostController) {
    navController.navigate("")
}

我想访问嵌套可组合中的 navController 进行导航,但我不想将 navController 从父可组合传递到子可组合,如上所述

无论如何都可以从 NavHost 内的任何地方访问 navController 而不通过可组合层次结构传递它

编辑:现在,我可以使用 CompositionLocalProvider 在嵌套组合中访问 navController,如下所示

val AppNavController = compositionLocalOf<NavHostController>() { error("NavHostController error") }

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    CompositionLocalProvider(
        AppNavController provides navController
    ) {
        NavHost(navController, startDestination = Route.Home.route) {
            /// other composes
            composable("Home") { HomeCompose() }
        }
    }
}

@Composable
fun HomeCompose() {
    ChildCompose()
}

@Composable
fun ChildCompose(navController: NavHostController) {
    val navController = AppNavController.current
    Column(modifier = Modifier.clickable {
        navController.navigate("Content")
    }) {
        ...
    }
}

按照官方文档的建议,使用 compose 1.0.0-beta04和 navigation 1.0.0-alpha10

  • 传递应该由可组合导航触发的 lambda,而不是NavController本身。
    @Composable
    fun ChildCompose(
        navigateTo: () -> Unit
    ) {
        //...
        navigateTo
    }

并使用它:

ChildCompose(navigateTo = {
    navController.navigate("...")
})

这样, ChildCompose可组合的工作独立于Navigation

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM