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

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

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

Navigation 快速上手

下面案例簡要展示使用 Compose 版本的 Navigation 庫來實(shí)現(xiàn)兩個頁面之間的跳轉(zhuǎn)

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

編寫欲跳轉(zhuǎn)的兩個頁面

編寫 Demo1 頁面

子頁面使用多個 composable 組件相組合的方法一一裝配起來

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

可以注意到 Button 里面的點(diǎn)擊事件還沒寫，后續(xù)我們寫好路由后再回來編寫跳轉(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
            )
        }
    }
}

編寫 Demo2 頁面

依葫蘆畫瓢

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

路由表配置

編寫單例類 RouteConfig 用來存儲路由名稱（等同于 vue-router 中我們設(shè)置的 path）

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

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

總路由

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

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

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

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

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

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

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

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)到指定頁面了！

// 寫于demo1頁面，點(diǎn)擊按鈕后跳轉(zhuǎn)到demo2頁面
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)邏輯只需要修改對應(yīng)的 path 即可

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

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

您可能感興趣的文章: