快捷導(dǎo)航

JetpackCompose Navigation導(dǎo)航實(shí)現(xiàn)流程

更新時(shí)間：2023年01月04日 15:08:50 作者：知奕奕

Navigation是Jetpack用于Android導(dǎo)航的組件，作用是處理頁(yè)面跳轉(zhuǎn)，以及頁(yè)面跳轉(zhuǎn)過(guò)程中的交互。使用Navigation，你就需要為每個(gè)頁(yè)面設(shè)定一條唯一路徑，它是一個(gè)String常量，形式是DeepLink的樣子，從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，它通過(guò)輸入目的地的路徑進(jìn)行轉(zhuǎn)跳

Navigation 快速上手

下面案例簡(jiǎn)要展示使用 Compose 版本的 Navigation 庫(kù)來(lái)實(shí)現(xiàn)兩個(gè)頁(yè)面之間的跳轉(zhuǎn)

這是完整的結(jié)構(gòu)（忽略掉紅線劃過(guò)的那個(gè)包）

編寫(xiě)欲跳轉(zhuǎn)的兩個(gè)頁(yè)面

編寫(xiě) Demo1 頁(yè)面

子頁(yè)面使用多個(gè) composable 組件相組合的方法一一裝配起來(lái)

Demo1main 渲染整個(gè)頁(yè)面，他接受一個(gè) NavController 對(duì)象，用于操縱導(dǎo)航相關(guān)的方法

可以注意到 Button 里面的點(diǎn)擊事件還沒(méi)寫(xiě)，后續(xù)我們寫(xiě)好路由后再回來(lái)編寫(xiě)跳轉(zhuǎn)邏輯

@Composable
fun Demo1main(navController: NavController) {
    body(navController)
}
@Composable
private fun body(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Button(onClick = {
            // 跳轉(zhuǎn)邏輯
        }) {
            Text(
                text = "前往demo2",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center
            )
        }
    }
}

編寫(xiě) Demo2 頁(yè)面

依葫蘆畫(huà)瓢

@Composable
fun Demo2main(navController: NavController) {
    body(navController)
}
@Composable
private fun body(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Button(onClick = {
            // 這里也寫(xiě)跳轉(zhuǎn)邏輯！
        }) {
            Text(
                text = "前往demo1",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center
            )
        }
    }
}

路由表配置

編寫(xiě)單例類(lèi) RouteConfig 用來(lái)存儲(chǔ)路由名稱（等同于 vue-router 中我們?cè)O(shè)置的 path）

后續(xù)為便于理解，統(tǒng)稱為 path

object RouteConfig {
    // 主頁(yè)面
    const val ROUTE_MAIN = "main"
    // 兩個(gè)跳轉(zhuǎn)頁(yè)面
    const val ROUTE_DEMO1 = "demo1"
    const val ROUTE_DEMO2 = "demo2"
}

總路由

創(chuàng)建文件 MainNav 并在里面實(shí)現(xiàn)路由導(dǎo)航的總邏輯

由于我們剛剛?cè)腴T(mén)，路由表可以很簡(jiǎn)單，按照以下結(jié)構(gòu)即可

rememberNavController 存儲(chǔ)所有 navcontroller 狀態(tài)
NavHost 一個(gè)容器，便于內(nèi)部頁(yè)面的切換，在里面注冊(cè)所有頁(yè)面

@Composable
fun AppNav() {
    // 存儲(chǔ)navigation狀態(tài)
    val navController = rememberNavController()
    // navhost容器
    // startDestination表示起始頁(yè)的path，這里我們指定demo1作為起始頁(yè)
    NavHost(navController = navController, startDestination = RouteConfig.ROUTE_DEMO1) {
        // 依次傳入path并注冊(cè)三個(gè)頁(yè)面
        composable(RouteConfig.ROUTE_MAIN) {
            MainActivity()
        }
        composable(RouteConfig.ROUTE_DEMO1) {
            Demo1main(navController)
        }
        composable(RouteConfig.ROUTE_DEMO2) {
            Demo2main(navController)
        }
    }
}

主頁(yè)面調(diào)用總路由

對(duì)于 kotlin 而言，非常簡(jiǎn)單，直接調(diào)用定義好的總路由方法即可

因?yàn)榭偮酚赡J(rèn)起始頁(yè)為 demo1，故渲染 mainactivity 后就會(huì)立即載入 demo1 頁(yè)面！

class MainActivity() : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DemoComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    // 一鍵調(diào)用，方便快捷
                    AppNav()
                }
            }
        }
    }
}

跳轉(zhuǎn)邏輯完善

嘿！還記得我們之前置空的按鈕跳轉(zhuǎn)邏輯嗎？

我們已經(jīng)配置完了所有路由，為此，僅需將以下代碼添加到按鈕點(diǎn)擊事件即可跳轉(zhuǎn)到指定頁(yè)面了！

// 寫(xiě)于demo1頁(yè)面，點(diǎn)擊按鈕后跳轉(zhuǎn)到demo2頁(yè)面
navController.navigate(RouteConfig.ROUTE_DEMO2)

為便于大家理解，現(xiàn)給出 demo1.kt 目前的完整代碼

@Composable
fun Demo1main(navController: NavController) {
    body(navController)
}
@Composable
private fun body(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Button(onClick = {
            navController.navigate(RouteConfig.ROUTE_DEMO2)
        }) {
            Text(
                text = "前往demo2",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center
            )
        }
    }
}

demo2 的跳轉(zhuǎn)邏輯只需要修改對(duì)應(yīng)的 path 即可

目前僅學(xué)到了最簡(jiǎn)單的 navigate 跳轉(zhuǎn)，后續(xù)還有帶參跳轉(zhuǎn)，請(qǐng)關(guān)注進(jìn)階版本！

到此這篇關(guān)于JetpackCompose Navigation導(dǎo)航實(shí)現(xiàn)流程的文章就介紹到這了,更多相關(guān)JetpackCompose Navigation內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: