Jetpack Compose Navigation 中的参数传递

Jetpack Compose Navigation 中的参数传递

使用navController.navigate("xxx")时传递参数

简单的例子,不依赖xml布局文件中的 Activity 的 ID或,不使用Bundle,不使用NavOptions

在 Jetpack Compose 中,您可以使用导航组件中的 NavController 类在不同的屏幕之间导航。向目标传递参数类似于向 URL 添加查询参数或路径。

要将参数传递给目标屏幕,您需要向路由添加参数占位符。

例如,假设您有一个名为 DetailScreen 的屏幕,用于显示用户的详细信息,并且您希望在导航到此屏幕时将用户的ID作为参数传递。您可以将 DetailScreen 的路由定义为"detail/{uId}",其中 uId 是用户ID的占位符。

接收端:

kotlin 复制代码
@Composable
fun MyNavHost() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("detail/{uId}") { navBackStackEntry ->
            /* 从路由中提取 id */
            val uId = navBackStackEntry.arguments?.getString("uId")
            /* 我们检查它是否不为空 */
            uId?.let { id->
                DetailScreen(uId = id)
            }
        }
        /* ... */
    }
}

传递对象:

请记住,您只能向您的目标传递字符串值。但是,如果您有一个数据类并希望将其传递给您的组合,则一个可能的解决方案是使用任何转换器将您的对象转换为字符串。

scss 复制代码
composable("detail/{user}") { navBackStackEntry ->
    // 创建 Gson 对象
    val gson: Gson = GsonBuilder().create()
    /* 从路由中提取用户对象的 JSON */
    val userJson = navBackStackEntry.arguments?.getString("user")
    // 将 JSON 字符串转换为 User 数据类对象
    val userObject = gson.fromJson(userJson, User::class.java)
    DetailScreen(user = userObject)
}

多个参数:

如果您想传递多个参数,则可以定义一个带有多个占位符的路由,这些占位符用斜杠("/")分隔。例如:

java 复制代码
composable("detail/{name}/{id}") { backStackEntry ->
    // 从路由中提取参数
    val name = backStackEntry.arguments?.getString("name")
    val id = backStackEntry.arguments?.getString("id")

    // 检查参数是否不为空,并渲染屏幕
    if (name != null && id != null) {
        DetailScreen(name, id)
    }
}

可选参数:

如果在某些情况下,您不希望有任何参数。那么,您也可以将其定义为可选参数。但是,要定义一个可选参数..

我们必须使用查询参数语法("?argName={argName}") 我们必须设置一个defaultValue,或者将nullability设置为true。

ini 复制代码
composable(
    route = "detail?uId={uId}",
    arguments = listOf(
        navArgument("uId") {
            defaultValue = 0
            type = NavType.IntType
        }
    )
) { navBackStackEntry ->
    /* 从路由中提取 id */
    val uId = navBackStackEntry.arguments?.getInt("uId")
    /* 检查是否为空 */
    uId?.let {
        DetailScreen(uId = it)
    }
}

注意

"如果您想要添加更多参数,在参数之间加上 & 符号,例如:"?argName1={argName1}&argName2={argName2}"

注意:您传递的字符串/ JSON 字符串值不应包含 "/",否则由于意外的路径/路由,您的应用程序将崩溃。"

发送端

kotlin 复制代码
@Composable
fun HomeScreen(navController: NavController) {
    Button(
        onClick = {
            /* 用 1 替换 {uId} */
            navController.navigate(
                "detail/{uId}" // 根据需要修改您的路由
                    .replace(
                        oldValue = "{uId}",
                        newValue = "1"
                    )
            )
        }
    ) {
        Text(text = "使用 id 1 导航到详情页面")
    }
}

传递对象

ini 复制代码
@Composable
fun HomeScreen(navController: NavController) {
    val userObj = User()
    Button(
        onClick = {   
            val gson: Gson = GsonBuilder().create()            
            val userJson = gson.toJson(userObj)
            /* 用 userJson 替换 {user} */
            navController.navigate(
                "detail/{user}" // 根据需要修改您的路由
                    .replace(
                        oldValue = "{user}",
                        newValue = userJson
                    )
            )
        }
    ) {
        Text(text = "使用 userJson 导航到详情页面")
    }
}

原文链接

谷歌上找的文章自己翻译的,仅供学习,如有侵权请联系我,我会进行修改或删除

相关推荐
贵沫末13 分钟前
React——基础
前端·react.js·前端框架
福柯柯20 分钟前
Android ContentProvider的使用
android·contenprovider
不想迷路的小男孩21 分钟前
Android Studio 中Palette跟Component Tree面板消失怎么恢复正常
android·ide·android studio
餐桌上的王子22 分钟前
Android 构建可管理生命周期的应用(一)
android
aklry24 分钟前
uniapp三步完成一维码的生成
前端·vue.js
菠萝加点糖26 分钟前
Android Camera2 + OpenGL离屏渲染示例
android·opengl·camera
Rubin9332 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子32 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982433 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug35 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端