compose导航简单使用讲解

概览

所谓的导航就是页面跳转，由于Compose中每个@Composable注解标注的方法就能够成为一个视图，因此导航就是用来处理这些视图之间的跳转操做。git

配置

配置咱们的根gradle中kotlin插件版本

classpath "com.android.tools.build:gradle:7.1.0-alpha03"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.10"
复制代码

加入导航依赖

implementation("androidx.navigation:navigation-compose:2.4.0-alpha02")
复制代码

根gradle配置compose version

compose_version = '1.0.0-beta09'
复制代码

基础用法

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

构建导航图

导航图中咱们构建了两个路由，goodsList表明商品列表，goodsDetail表明商品详情。markdown

@Composable
fun Greeting(name: String) {
    val controller = rememberNavController()
    NavHost(navController = controller, startDestination = "goodsList") {
        composable("goodsList") {
            GoodsList(controller)
        }
        composable("goodsDetail") {
            GoodsDetail()
        }
    }
}
复制代码

商品列表

@Composable
fun GoodsList(controller: NavHostController) {
    Column {
        (1..9).forEach {
            GoodsItem(controller, it)
        }
    }
}
复制代码

商品itemapp

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

@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)
    }
}
复制代码

商品详情

@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))
    }

}
复制代码

效果图

传递参数

咱们将上面的例子进行一些改进，点击商品Item的时候将商品的id传入的详情页面展现。oop

直接上所有代码，若是上一节的demo仔细看了的话，那么直接看代码中的注释就ok：学习

代码

@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)
    }
}
复制代码

效果

传递默认参数

咱们能够在构建导航路由的时候使用defaultValue添加默认参数，代码以下：gradle

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

关注个人公众号 “安安安安卓” 学习更多知识ui