Compose里Navigation导航的优雅跳转

原文地址: Compose里Navigation导航的优雅跳转-Stars-One的杂货小窝

之前Jetpack Compose学习(11)——Navigation页面导航的使用此文讲解了对应的使用步骤

到新公司接手一个新的项目,发现其中的路由导航写法有些可取之处,特意做下笔记(也算是Navigation新版本的一个特性讲解)

先贴下一份简单的代码(可以发现,路由直接写了一个类就完成了,传参也比较方便了)

@Composable
fun App() {
    AIcameraTheme {
        val navController = rememberNavController()

        CompositionLocalProvider(
            MyLocal.LocalNavController provides navController,
        ) {
            NavHost(navController,startDestination = Pages.Home) {
                composable<Pages.Home> {
                    HomePage()
                }

                composable<Pages.Camera> {
                    CameraPage()
                }
            }
        }
    }
}

不过需要注意下: navigationCompose版本为2.8.0,低版本可能不支持上面的泛型传参哦!!

步骤说明

1.依赖相关添加

libs.version.tomal添加下面

[versions]
kotlinxSerialization = "1.7.10"
kotlinxSerializationJson = "1.3.3"
navigationCompose = "2.8.0"

[libraries]
kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }
androidx-navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "navigationCompose" }


[plugins]
kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlinxSerialization" }
ksp = { id = "com.google.devtools.ksp", version.ref = "ksp" }

在项目级别gradle文件:

plugins {
	//添加此行
    alias(libs.plugins.kotlin.serialization) apply false
}

在app级别gradle文件:

plugins {
	alias(libs.plugins.kotlin.serialization)
}

dependencies {
	implementation(libs.androidx.navigation.compose)
	implementation(libs.kotlinx.serialization.json)
}

2.页面类

data object Pages{

    @Serializable
    data object Home

    @Serializable
    data object Camera
}

使用

@Composable
fun App() {
    AIcameraTheme {
        val navController = rememberNavController()

        CompositionLocalProvider(
            MyLocal.LocalNavController provides navController,
        ) {
            NavHost(navController,startDestination = Pages.Home) {
                composable<Pages.Home> {
                    HomePage()
                }

                composable<Pages.Camera> {
                    CameraPage()
                }
            }
        }
    }
}

如果页面跳转携带参数呢?

这里给出一个简单例子

data object Pages{

    @Serializable
    data class About(val author: String)
}

@Composable
fun AboutPage(data:Pages.About) {

}


NavHost(navController,startDestination = Pages.Home) {
	composable<Pages.About> {
		AboutPage(it.toRoute())
	}
}

//在页面跳转的生活,直接构建对应的对象即可,如下
navController.navigate(Pages.About("mydata"))

上述的方法,比起之前版本需要自行在路由构建url,写上?和&号实在是方便许多!