Compose Navigation与 Compose 集成、操作StackNavigator

2023-12-08 15:34:10

前言

Compose Navigation 与 Compose 集成，可以方便我们在 Compose 中使用 Navigation。本文将介绍如何将 Compose Navigation 集成到 Compose 中，以及如何在 Compose 中操作 StackNavigator。

集成 Compose Navigation

要将 Compose Navigation 集成到 Compose 中，我们需要在项目中添加以下依赖：

dependencies {
    implementation("androidx.navigation:navigation-compose:2.4.2")
}

添加依赖后，我们需要在项目的 build.gradle 文件中启用 Compose Navigation。

android {
    // ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.0-alpha06"
        kotlinCompilerVersion = "1.6.21"
        enableComposeNavigation = true
    }
}

创建导航图

创建导航图是使用 Compose Navigation 的第一步。导航图定义了应用程序中的所有屏幕以及它们之间的关系。

@Composable
fun NavGraph(navController: NavController) {
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen() }
        composable("detail") { DetailScreen() }
    }
}

在上面的代码中，我们创建了一个导航图，其中包含两个屏幕：HomeScreen 和 DetailScreen。HomeScreen 是应用程序的首页，DetailScreen 是详情页。

使用导航图

创建导航图后，就可以在 Compose 中使用它。我们可以使用 NavHost 组件来显示导航图。

@Composable
fun MainScreen(navController: NavController) {
    Scaffold(
        bottomBar = { BottomNavigationBar(navController = navController) }
    ) {
        NavHost(navController = navController, startDestination = "home") {
            composable("home") { HomeScreen() }
            composable("detail") { DetailScreen() }
        }
    }
}

在上面的代码中，我们使用 NavHost 组件来显示导航图。BottomNavigationBar 组件是底部导航栏，它允许用户在不同的屏幕之间切换。

操作StackNavigator

StackNavigator 是 Compose Navigation 中的一种导航组件，它可以实现屏幕之间的压栈和出栈。

@Composable
fun StackNavigatorDemo(navController: NavController) {
    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            Button(onClick = { navController.navigate("detail") }) {
                Text(text = "Go to Detail Screen")
            }
        }
        composable("detail") {
            Button(onClick = { navController.popBackStack() }) {
                Text(text = "Go back")
            }
        }
    }
}