Jetpack compose navigation with custom NavType
https://www.youtube.com/watch?v=qBxaZ071N0c&t=182s
定义两个路由
@Serializable
data object DogListRoute@Serializable
data class DogDetailRoute(val dog: Dog,val breedSize: BreedSize
)
即两个页面,一个狗列表页面,点击列表项,进入狗详情界面。
大部分情况下,我们应该是传狗的ID,然后在狗详情界面,通过查询本地数据库or API,去获取狗详情信息。
但是这里演示一个自定义的数据类型,通过navtype来传递。
可以看到 DogDetailRoute带了两个参数,一个是自定义类型Dog。另一个是枚举类型 BreedSize
@Serializable
data class Dog(val id: Int,val name: String,
)enum class BreedSize {SMALL,MEDIUM,LARGE
}
序列化需要引入
plugin
jetbrains-kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }implementationkotlinx-serialization-json = { group = "org.jetbrains.kotlinx", name = "kotlinx-serialization-json", version = "1.6.3" }
通过自定义navtype可以方便的在导航过程中,传递自定义参数
composable<DogListRoute> {DogListScreen(onDogClick = { dog, breedSize ->navController.navigate(DogDetailRoute(dog = dog,breedSize = breedSize))})}composable<DogDetailRoute>(typeMap = mapOf(typeOf<Dog>() to CustomNavType.DogType,typeOf<BreedSize>() to NavType.EnumType(BreedSize::class.java))) {val arguments = it.toRoute<DogDetailRoute>()DogDetailScreen(dog = arguments.dog,breedSize = arguments.breedSize)}
navController.navigate 直接放入带自定义参数的 route,在接收端,通过 toRoute直接获取组装后的带自定义参数的route,但是前提条件是,需要注册号typeMap
typeMap = mapOf(
typeOf<Dog>() to CustomNavType.DogType,
typeOf<BreedSize>() to NavType.EnumType(BreedSize::class.java)
通过CustomNavType.DogType告诉navigator怎么对dog进行转换
object CustomNavType {val DogType = object : NavType<Dog>(isNullableAllowed = false) {override fun get(bundle: Bundle, key: String): Dog? {return Json.decodeFromString(bundle.getString(key) ?: return null)}override fun parseValue(value: String): Dog {return Json.decodeFromString(Uri.decode(value))}override fun serializeAsValue(value: Dog): String {return Uri.encode(Json.encodeToString(value))}override fun put(bundle: Bundle, key: String, value: Dog) {bundle.putString(key, Json.encodeToString(value))}}
}
其中 使用URI编码主要用于将URI中的特殊字符转化为一种通用的格式