Android Compose Navigation

引入依赖

dependencies {
    implementation "androidx.navigation:navigation-compose:2.4.0-alpha10"
}

开始

val navController = rememberNavController()

创建 NavHost

NavHost(navController = navController,startDestination = "societies"){
    composable("societies"){SocletyListDES()}
    composable("bbs"){BBSListDES()}
    composable("mine"){MineDES()}
}
//startDestination 不可用 可组合项

导航到可组合项

@Composable
fun SocietyListDES(navCrontroller: NavController){
    Button(onclick={ navController.navigate("society-detail") }){
        Text(text="society-detail")
    }
}

一般情况下,navigate方法会将新的目的地加入返回栈,而如果需要自定义其行为

// 放弃之前所有返回栈,退回到societies,即最开始的一层
navController.navigate("society-detail"){
    popUpTo("societies")
}

// Pop everything up to and including the "home" destination off
// the back stack before navigating to the "friends" destination
navController.navigate("friends") {
    popUpTo("home") { inclusive = true }
}

// Navigate to the "search” destination only if we’re not already on
// the "search" destination, avoiding multiple copies on the top of the
// back stack
navController.navigate("search") {
    launchSingleTop = true
}

使用参数进行导航

类似于http请求过程中使用的路由

NavHost(startDestination = "profile/{userId}"){
    ...
    composable("profile/{userId}"){...}
}
// 默认情况下 所有参数都会被解析成字符串,也可使用 ` arguments ` 参数来设置 ` type `
NavHost(startDestination="profile/{userId}"){
    ...
    composable(
        "profile/{userId}",
        arguments= listOf(navArgument("userId") { type = NavType.StringType }
        ) {...}
}
// 提取参数
composable("profile/{userId}") { backStackEntry ->
    Profile(navController, backStackEntry.arguments?.getString("userId"))
}
// 然后如何 perform nav action
navController.navigate("profile/user1234")

添加可选参数

可选参数与必需参数有两点不同

  • 可选参数必须使用查询参数语法 "?argName={argName}" 来添加
  • 可选参数必须具有 defaultValue 集 或 nullability = true (也就将默认值隐式设为null)
    因此 所有可选参数都必须以列表的形式显示添加到 composable()
composable("profile?userId={userId}",
    arguments = listOf(navArgument("userId") { defaultValue = "me" })
) { backStackEntry ->
    Profile(navController, backStackEntry.arguments?.getString("userId"))
}

通过路线处理参数的结构意味着可组合项将完全独立于Navigation,并更易于测试

深层链接

Navigation Compose 支持隐式深层链接,此类链接也可定义为 compose() 函数的一部分。
使用 navDeepLink() 以列表的形式添加深层链接

val uri = "https://example.com"

compoable("profile?id={id}",
    deepLinks = listOf(navDeepLink {uriPattern = "$uri/{id}"})
){ backStackEntry ->
    Profile(navController, backStackEntry.arguments?.getString("id"))
}

深层链接的更多信息

更多内容