• 注册
  • Android博客 Android博客 关注:0 内容:1124

    compose导航简单使用讲解

  • 查看作者
  • 打赏作者
  • 当前位置: 职业司 > Android开发 > Android博客 > 正文
    • Android博客
    • 本文git地址:github.com/ananananzhu…

      概览

      所谓的导航就是页面跳转,因为Compose中每一个@Composable注解标注的方法就可以成为一个视图,所以导航就是用来处理这些视图之间的跳转操作。

      配置

      1. 配置我们的根gradle中kotlin插件版本
        classpath "com.android.tools.build:gradle:7.1.0-alpha03"
      classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.10"
      复制代码
      1. 加入导航依赖
      implementation("androidx.navigation:navigation-compose:2.4.0-alpha02")
      复制代码
      1. 根gradle配置compose version
       compose_version = '1.0.0-beta09'
      复制代码

      基础用法

      使用导航首先需要构建一个导航图,将每个导航视图分别与一个字符串相关联,本例中我们模拟这样一个场景,点击商品列表跳转到商品详情页面

      1. 构建导航图

      导航图中我们构建了两个路由,goodsList代表商品列表,goodsDetail代表商品详情。

      
      @Composable
      fun Greeting(name: String) {
      val controller = rememberNavController()
      NavHost(navController = controller, startDestination = "goodsList") {
      composable("goodsList") {
      GoodsList(controller)
      }
      composable("goodsDetail") {
      GoodsDetail()
      }
      }
      }
      复制代码
      1. 商品列表
      @Composable
      fun GoodsList(controller: NavHostController) {
      Column {
      (1..9).forEach {
      GoodsItem(controller, it)
      }
      }
      }
      复制代码

      商品item

      点击商品item使用路由跳转到商品详情

      @Composable
      fun GoodsItem(controller: NavHostController, i: Int) {
      Column {
      Row(modifier = Modifier.clickable {
      controller.navigate("goodsDetail")
      }, verticalAlignment = Alignment.CenterVertically) {
      Image(painter = painterResource(id = R.drawable.apple), contentDescription = "")
      Text(text = "第件${i}件商品", modifier = Modifier.padding(start = 8.dp))
      Spacer(modifier = Modifier.weight(1f))
      }
      Divider(color = Color.Red)
      }
      }
      复制代码
      1. 商品详情
      @Composable
      fun GoodsDetail() {
      Column(modifier = Modifier.fillMaxSize(1f),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally) {
      Image(painter = painterResource(id = R.drawable.apple), contentDescription = "",modifier = Modifier.size(200.dp))
      Text(text = "安卓机器人",style = TextStyle(fontSize = 40.sp))
      }
      }
      复制代码
      1. 效果图

      compose导航简单使用讲解

      传递参数

      我们将上面的例子进行一些改进,点击商品Item的时候将商品的id传入的详情页面展示。

      直接上全部代码,如果上一节的demo仔细看了的话,那么直接看代码中的注释就ok:

      1. 代码
      
      @Composable
      fun Greeting(name: String) {
      val controller = rememberNavController()
      NavHost(navController = controller, startDestination = "goodsList") {
      composable("goodsList") {
      GoodsList(controller)
      }
      composable("goodsDetail/{goodsId}", arguments = listOf(navArgument("goodsId") {//路由中三部分的goodsId名称必须一致
      type = NavType.StringType//表示传递的参数是String类型
      })) {
      GoodsDetail(it.arguments?.getString("goodsId"))//获取商品id传递给GoodsDetail视图
      }
      }
      }
      @Composable
      fun GoodsList(controller: NavHostController) {
      Column {
      (1..9).forEach {
      GoodsItem(controller, it)
      }
      }
      }
      @Composable
      fun GoodsDetail(id: String?) {
      Column(
      modifier = Modifier.fillMaxSize(1f),
      verticalArrangement = Arrangement.Center,
      horizontalAlignment = Alignment.CenterHorizontally
      ) {
      Image(
      painter = painterResource(id = R.drawable.apple),
      contentDescription = "",
      modifier = Modifier.size(200.dp)
      )
      Text(text = "安卓机器人: $id", style = TextStyle(fontSize = 40.sp))//这里将商品id展示出来
      }
      }
      @Composable
      fun GoodsItem(controller: NavHostController, i: Int) {
      Column {
      Row(modifier = Modifier.clickable {
      controller.navigate("goodsDetail/$i")//这里将商品id拼接到参数后面
      }, verticalAlignment = Alignment.CenterVertically) {
      Image(painter = painterResource(id = R.drawable.apple), contentDescription = "")
      Text(text = "第件${i}件商品", modifier = Modifier.padding(start = 8.dp))
      Spacer(modifier = Modifier.weight(1f))
      }
      Divider(color = Color.Red)
      }
      }
      复制代码
      1. 效果

      compose导航简单使用讲解

      传递默认参数

      我们可以在构建导航路由的时候使用defaultValue添加默认参数,代码如下:

       composable("goodsDetail/{goodsId}", arguments = listOf(navArgument("goodsId") {//路由中三部分的goodsId名称必须一致
      type = NavType.StringType//表示传递的参数是String类型
      defaultValue="默认商品"
      })) {
      GoodsDetail(it.arguments?.getString("goodsId"))//获取商品id传递给GoodsDetail视图
      }
      复制代码

      关注我的公众号 “安安安安卓” 学习更多知识

      请登录之后再进行评论

      登录

      手机阅读天地(APP)

      • 微信公众号
      • 微信小程序
      • 安卓APP
      手机浏览,惊喜多多
      匿名树洞,说我想说!
      问答悬赏,VIP可见!
      密码可见,回复可见!
      即时聊天、群聊互动!
      宠物孵化,赠送礼物!
      动态像框,专属头衔!
      挑战/抽奖,金币送不停!
      赶紧体会下,不会让你失望!
    • 实时动态
    • 签到
    • 做任务
    • 发表内容
    • 偏好设置
    • 到底部
    • 帖子间隔 侧栏位置:
    • 还没有账号?点这里立即注册