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