前言

導(dǎo)航是每個(gè) Android 應(yīng)用程序都具有的重要功能之一。我們從一個(gè)屏幕導(dǎo)航到另一個(gè)屏幕。它可以是從一個(gè)活動(dòng)到另一個(gè)活動(dòng)，或者從一個(gè)片段到另一個(gè)片段或其他任何東西。您幾乎找不到任何不涉及導(dǎo)航的應(yīng)用程序。

我們知道如何在 Android 中實(shí)現(xiàn)導(dǎo)航。但是，今天，我們將學(xué)習(xí)如何在 Jetpack Compose 中執(zhí)行導(dǎo)航。

在本章中，我們將學(xué)習(xí)如何使用 Jetpack Navigation 在不同的可組合組件之間導(dǎo)航。那么，讓我們開始設(shè)置吧。

設(shè)置

要在 Jetpack Compose 項(xiàng)目中使用導(dǎo)航，您只需在build.gradle文件中添加以下依賴項(xiàng)：

implementation "androidx.navigation:navigation-compose:1.0.0-alpha02"

現(xiàn)在，我們已經(jīng)準(zhǔn)備好在我們的應(yīng)用程序中使用導(dǎo)航了。

基本上，Jetpack Compose Navigation 有兩個(gè)主要部分：

1.導(dǎo)航控制器
2.導(dǎo)航主機(jī)

導(dǎo)航控制器

您可以將 NavController 視為導(dǎo)航組件的中心 API。因此，要導(dǎo)航到任何目的地，我們需要使用 NavController。

要?jiǎng)?chuàng)建 NavController，可以使用該rememberNavController()方法。因此，NavController 是有狀態(tài)的，它將擁有有關(guān)后堆棧的所有信息。因此，您無需單獨(dú)處理。以下是 NavController 的示例：

val navController = rememberNavController()

一個(gè) NavController 應(yīng)該只與一個(gè) NavHost 相關(guān)聯(lián)。但是這個(gè) NavHost 是什么？讓我們了解一下。

導(dǎo)航主機(jī)

您可以將 NavHost 視為可以繪制屏幕的區(qū)域，并且在 NavController 的幫助下，您可以在 NavHost 中存在的各種屏幕之間導(dǎo)航。

NavHost 中的每個(gè)屏幕都有一些與之關(guān)聯(lián)的路由，并且在此路由的幫助下，執(zhí)行屏幕之間的導(dǎo)航。以下是 NavHost 的示例：

val navController = rememberNavController()
NavHost(
        navController = navController,
        startDestination = "first_screen"
) {
    composable("first_screen") {
        // first screen
    }
    composable("second_screen") {
        // second screen
    }
}

正如您在上面的代碼中看到的，NavHost 采用兩個(gè)參數(shù)navController，即startDestination. startDestination是導(dǎo)航的開始屏幕。您可以將其視為 Navigation 的入口點(diǎn)。在 NavHost 中，您可以根據(jù)需要聲明任意數(shù)量的可組合。

現(xiàn)在，讓我們在一個(gè)項(xiàng)目中實(shí)現(xiàn)導(dǎo)航。

注意：要使用 Jetpack Compose，您需要擁有最新的 Canary 版本的 Android Studio 4.2。

導(dǎo)航項(xiàng)目

打開 Android Studio 并創(chuàng)建一個(gè) Empty Compose Activity。

創(chuàng)建項(xiàng)目后，需要在build.gradle文件中添加 Navigation 的依賴：

implementation "androidx.navigation:navigation-compose:1.0.0-alpha02"

添加依賴項(xiàng)后，同步您的項(xiàng)目。

注意：要使用 Navigation，您需要謹(jǐn)慎使用 Jetpack Compose 版本和 Navigation 版本。就我而言，Jetpack Compose 版本是“1.0.0-alpha07”，Navigation 版本是“1.0.0-alpha02”。

為簡單起見，我們將添加三個(gè)屏幕，即屏幕一、屏幕二和屏幕三。每個(gè)屏幕上都有一個(gè)文本，單擊文本時(shí)，您將從一個(gè)屏幕導(dǎo)航到另一個(gè)屏幕。

我們知道，為了使用 Navigation，我們需要NavHost在 NavHost 內(nèi)部創(chuàng)建所有屏幕。同時(shí)我們也知道NavHost需要NavController。

因此，讓我們創(chuàng)建一個(gè)名為 ComposeNavigation 的可組合函數(shù)：

@Composable
fun ComposeNavigation() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = "first_screen"
    ) {
        composable("first_screen") {
            FirstScreen(navController = navController)
        }
        composable("second_screen") {
            SecondScreen(navController = navController)
        }
        composable("third_screen") {
            ThirdScreen(navController = navController)
        }
    }
}

在上面的代碼中，我們使用 NavHost 制作屏幕，我們的第一個(gè)屏幕是“first_screen”，因?yàn)槲覀儗?startDestination 設(shè)置為“first_screen”。這里，“ first_screen ”、“ second_screen ”和“ third_screen ”是每個(gè)屏幕的路由。每個(gè)目的地都應(yīng)該有一條獨(dú)特的路線，因?yàn)樵谶@些路線的幫助下，一個(gè)屏幕與其他屏幕區(qū)分開來。

現(xiàn)在，讓我們制作每個(gè)屏幕的 UI。以下是第一屏的代碼：

@Composable
fun FirstScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "First Screen\n" +
                    "Click me to go to Second Screen",
            color = Color.Green,
            style = TextStyle(textAlign = TextAlign.Center),
            modifier = Modifier.padding(24.dp).clickable(onClick = {
                // this will navigate to second screen
                navController.navigate("second_screen")
            })
        )
    }
}

在上面的代碼中，您可以看到點(diǎn)擊文本時(shí)，我們正在使用 navController 使用該方法導(dǎo)航到“ second_screen ” navigate。

注意：您需要顯式導(dǎo)入 navigate("some_string") 方法（如果您的 IDE 無法做到這一點(diǎn)）。

import androidx.navigation.compose.navigate

同樣，您可以制作其他屏幕的 UI，如下所示：

@Composable
fun SecondScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Second Screen\n" +
                    "Click me to go to Third Screen",
            color = Color.Yellow,
            style = TextStyle(textAlign = TextAlign.Center),
            modifier = Modifier.clickable(onClick = {
                // this will navigate to third screen
                navController.navigate("third_screen")
            })
        )
    }
}

@Composable
fun ThirdScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Third Screen\n" +
                    "Click me to go to First Screen",
            color = Color.Red,
            style = TextStyle(textAlign = TextAlign.Center),
            modifier = Modifier.clickable(onClick = {
                // this will navigate to first screen
                navController.navigate("first_screen")
            })
        )
    }
}

最后，您需要ComposeNavigation從以下方式調(diào)用該方法setContent：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        ComposeNavigationTheme {
            ComposeNavigation()
        }
    }
}

現(xiàn)在，運(yùn)行應(yīng)用程序并點(diǎn)擊文本以導(dǎo)航到不同的屏幕。另外，嘗試按下后退按鈕并驗(yàn)證是否正在維護(hù)后退堆棧。

作者：Sumit Mishra
鏈接：https://blog.mindorks.com/jetpack-compose-navigation