The Compose navigation is a simple tutorial to use

Git address: github.com/ananananzhu…

An overview of

Navigation is page jumps, and because each @composable annotation annotation in Compose becomes a view, navigation is used to handle jumps between those views.

configuration

1. Configure the kotlin plugin version in our root Gradle

Classpath "com. Android. Tools. Build: gradle: 7.1.0 - alpha03" classpath "org. Jetbrains. Kotlin: kotlin - gradle - plugin: 1.5.10"Copy the code

2. Add navigation dependencies

Implementation (" androidx. Navigation: navigation - compose: 2.4.0 - alpha02 ")Copy the code

3. The root Gradle configures compose Version

Compose_version = '1.0.0 - beta09'Copy the code

Basic usage

To use navigation, we first need to build a navigation diagram, and associate each navigation view with a string respectively. In this example, we simulate such a scenario, click the commodity list to jump to the commodity details page

1. Building a navigation map

In the navigation diagram, we built two routes, goodsList for the list of goods and goodsDetail for the details of the goods.

@Composable
fun Greeting(name: String) {
    val controller = rememberNavController()
    NavHost(navController = controller, startDestination = "goodsList") {
        composable("goodsList") {
            GoodsList(controller)
        }
        composable("goodsDetail") {
            GoodsDetail()
        }
    }
}
Copy the code

2. List of goods

@Composable fun GoodsList(controller: NavHostController) { Column { (1.. 9).forEach { GoodsItem(controller, it) } } }Copy the code

Commodity item

Click on item to use route to jump to item details

@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) } }Copy the code

3. Goods details

@Composable fun GoodsDetail() { Column(modifier = Modifier.fillMaxSize(1f),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally) { Image(painter = painterResource(id = R.drawable.apple), ContentDescription = "", mysql = modification.size (200.dp)) Text(Text = "android ",style = TextStyle(fontSize = 40.sp))}}Copy the code

4. rendering

Passing parameters

Let’s improve the above example by passing the Item ID into the details page when clicking on the Item.

If you looked at the code carefully in the previous demo, you can just look at the comments in the code:

1. code

@Composable fun Greeting(name: String) { val controller = rememberNavController() NavHost(navController = controller, startDestination = "goodsList") { composable("goodsList") { GoodsList(controller) } composable("goodsDetail/{goodsId}", Arguments = listOf(navArgument("goodsId") {type = navtype.stringType})) {arguments = listOf(navArgument("goodsId") {arguments = listOf(navArgument("goodsId") { GoodsDetail(it.arguments? .getString("goodsId"))// Get the item ID passed to the GoodsDetail view}}} @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 = modification.size (200.dp)) Text(Text = "android: $id", style = TextStyle(fontSize = 40.sp))} @composable fun GoodsItem(controller: NavHostController, I: Composable fun GoodsItem) Int) {Column {Row(modifier = modifier. Clickable {controller.navigate("goodsDetail/$I ")}, 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) } }Copy the code

2. The effect

Passing default parameters

We can add a default parameter using defaultValue when building the navigation route as follows:

composable("goodsDetail/{goodsId}", Arguments = listOf(navArgument("goodsId") {// The goodsId names of the three parts of the route must be the same })) {GoodsDetail(it. Arguments? .getString("goodsId"))// Get the item ID to pass to the GoodsDetail view}Copy the code

Follow my public account “ananzhuo” to learn more knowledge