Android Compose 框架的导航核心之导航图构建深入剖析(三十三)

Android Compose 框架的导航核心之导航图构建深入剖析

一、引言

在现代 Android 应用开发中，导航是用户体验的重要组成部分。一个设计良好的导航系统能够让用户轻松地在应用的不同界面之间进行切换，提高应用的易用性和流畅性。Android Compose 作为新一代的声明式 UI 框架，为开发者提供了强大而灵活的导航功能。其中，导航图构建是 Android Compose 导航系统的核心，它允许开发者以一种清晰、结构化的方式定义应用的导航结构。本文将从源码级别深入分析 Android Compose 框架中导航图构建的核心概念 ——NavGraphBuilder 和 composable 路由，帮助开发者更好地理解和运用这一重要特性。

二、Android Compose 导航基础回顾

2.1 声明式 UI 编程范式

Android Compose 采用声明式 UI 编程范式，与传统的命令式 UI 编程不同，它更注重描述 UI 的最终状态，而不是如何一步步地构建和更新 UI。在 Compose 中，我们通过组合一系列的可组合函数来定义 UI，这些函数会根据传入的参数和状态自动生成相应的 UI 界面。这种方式使得代码更加简洁、易于维护，同时也提高了开发效率。

2.2 可组合函数

可组合函数是 Compose 中的核心概念，它是一种特殊的函数，用于描述 UI 的一部分或整个 UI 界面。可组合函数可以接受参数，并根据这些参数生成不同的 UI。例如：

kotlin

import androidx.compose.material.Text
import androidx.compose.runtime.Composable

// 定义一个简单的可组合函数，用于显示文本
@Composable
fun MyText(text: String) {
    // 使用 Material 组件库中的 Text 组件显示文本
    Text(text = text)
}

在这个例子中，MyText 就是一个可组合函数，它接受一个字符串参数 text，并使用 Text 组件将其显示在界面上。

2.3 导航的基本概念

在 Android Compose 中，导航主要涉及到以下几个基本概念：

• 目的地（Destination） ：表示应用中的一个特定界面或屏幕，通常由一个可组合函数来表示。
• 路由（Route） ：是一个字符串，用于唯一标识一个目的地。当进行导航时，通过指定路由来确定要导航到的目的地。
• 导航图（NavGraph） ：是一个包含多个目的地和它们之间导航关系的图结构。导航图定义了应用的整体导航结构。

三、导航图构建的核心 ——NavGraphBuilder

3.1 NavGraphBuilder 概述

NavGraphBuilder 是 Android Compose 中用于构建导航图的核心类。它提供了一系列方法来定义导航图中的目的地、路由以及它们之间的导航关系。通过 NavGraphBuilder，开发者可以以一种声明式的方式构建复杂的导航结构。

3.2 NavGraphBuilder 的源码分析

以下是 NavGraphBuilder 的部分源码，我们将逐步分析其核心方法和功能。

kotlin

package androidx.navigation.compose

import androidx.compose.runtime.Composable
import androidx.navigation.NavBackStackEntry
import androidx.navigation.NavGraph
import androidx.navigation.NavGraphBuilder as AndroidXNavGraphBuilder
import androidx.navigation.Navigator
import androidx.navigation.get
import androidx.navigation.navOptions

// 继承自 AndroidX 的 NavGraphBuilder
class NavGraphBuilder(
    // 导航器提供者，用于获取不同类型的导航器
    private val navigatorProvider: NavigatorProvider,
    // 导航图的起始目的地路由
    private val startDestination: String
) : AndroidXNavGraphBuilder(navigatorProvider, startDestination) {

    // 定义一个可组合的目的地
    fun composable(
        // 目的地的路由，用于唯一标识该目的地
        route: String,
        // 目的地的参数，可用于传递数据到目的地
        arguments: List<NamedNavArgument> = emptyList(),
        // 目的地的深度链接配置，可用于通过外部链接导航到该目的地
        deepLinks: List<NavDeepLink> = emptyList(),
        // 目的地的内容，是一个可组合函数
        content: @Composable (NavBackStackEntry) -> Unit
    ) {
        // 获取 ComposeNavigator 导航器
        val navigator = navigatorProvider.get<ComposeNavigator>()
        // 创建一个 ComposeNavigator.Destination 对象，用于表示该目的地
        val destination = navigator.createDestination().apply {
            // 设置目的地的路由
            this.route = route
            // 设置目的地的参数
            arguments.forEach { (name, argument) ->
                addArgument(name, argument)
            }
            // 设置目的地的深度链接
            deepLinks.forEach { deepLink ->
                addDeepLink(deepLink)
            }
            // 设置目的地的内容
            this.content = content
        }
        // 将目的地添加到导航图中
        addDestination(destination)
    }

    // 定义一个子导航图
    fun navigation(
        // 子导航图的路由，用于唯一标识该子导航图
        route: String,
        // 子导航图的起始目的地路由
        startDestination: String,
        // 子导航图的参数，可用于传递数据到子导航图
        arguments: List<NamedNavArgument> = emptyList(),
        // 子导航图的深度链接配置，可用于通过外部链接导航到该子导航图
        deepLinks: List<NavDeepLink> = emptyList(),
        // 子导航图的构建函数，用于定义子导航图中的目的地和导航关系
        builder: NavGraphBuilder.() -> Unit
    ) {
        // 创建一个新的 NavGraphBuilder 实例，用于构建子导航图
        val subGraphBuilder = NavGraphBuilder(navigatorProvider, startDestination)
        // 调用构建函数，构建子导航图
        subGraphBuilder.builder()
        // 获取 ComposeNavigator 导航器
        val navigator = navigatorProvider.get<ComposeNavigator>()
        // 创建一个 NavGraph 对象，用于表示子导航图
        val subGraph = NavGraph(navigator).apply {
            // 设置子导航图的路由
            this.route = route
            // 设置子导航图的起始目的地路由
            this.startDestination = startDestination
            // 设置子导航图的参数
            arguments.forEach { (name, argument) ->
                addArgument(name, argument)
            }
            // 设置子导航图的深度链接
            deepLinks.forEach { deepLink ->
                addDeepLink(deepLink)
            }
            // 将子导航图中的目的地添加到子导航图中
            subGraphBuilder.destinations.forEach { destination ->
                addDestination(destination)
            }
        }
        // 将子导航图添加到当前导航图中
        addDestination(subGraph)
    }

    // 定义一个操作，用于处理导航操作
    fun action(
        // 操作的源目的地路由
        from: String,
        // 操作的目标目的地路由
        to: String,
        // 导航选项，可用于配置导航的动画、过渡效果等
        navOptions: NavOptions? = null
    ) {
        // 获取源目的地
        val fromDestination = findDestination(from)
        // 获取目标目的地
        val toDestination = findDestination(to)
        if (fromDestination != null && toDestination != null) {
            // 创建一个导航操作
            val action = NavAction(toDestination.id, navOptions)
            // 将导航操作添加到源目的地中
            fromDestination.addAction(action)
        }
    }
}

3.3 composable 方法分析

composable 方法是 NavGraphBuilder 中用于定义可组合目的地的核心方法。下面我们详细分析其实现原理：

kotlin

fun composable(
    route: String,
    arguments: List<NamedNavArgument> = emptyList(),
    deepLinks: List<NavDeepLink> = emptyList(),
    content: @Composable (NavBackStackEntry) -> Unit
) {
    // 获取 ComposeNavigator 导航器
    val navigator = navigatorProvider.get<ComposeNavigator>()
    // 创建一个 ComposeNavigator.Destination 对象，用于表示该目的地
    val destination = navigator.createDestination().apply {
        // 设置目的地的路由
        this.route = route
        // 设置目的地的参数
        arguments.forEach { (name, argument) ->
            addArgument(name, argument)
        }
        // 设置目的地的深度链接
        deepLinks.forEach { deepLink ->
            addDeepLink(deepLink)
        }
        // 设置目的地的内容
        this.content = content
    }
    // 将目的地添加到导航图中
    addDestination(destination)
}

代码解释

1. 获取导航器：

   kotlin

   val navigator = navigatorProvider.get<ComposeNavigator>()
   

   通过 navigatorProvider 获取 ComposeNavigator 导航器，ComposeNavigator 是用于处理 Compose 界面导航的导航器。

2. 创建目的地对象：

   kotlin

   val destination = navigator.createDestination().apply {
       // 设置目的地的路由
       this.route = route
       // 设置目的地的参数
       arguments.forEach { (name, argument) ->
           addArgument(name, argument)
       }
       // 设置目的地的深度链接
       deepLinks.forEach { deepLink ->
           addDeepLink(deepLink)
       }
       // 设置目的地的内容
       this.content = content
   }
   

   调用 navigator.createDestination() 方法创建一个 ComposeNavigator.Destination 对象，并设置其路由、参数、深度链接和内容。

3. 添加目的地到导航图：

   kotlin

   addDestination(destination)
   

   将创建好的目的地对象添加到导航图中，这样导航系统就可以识别和管理该目的地。

3.4 navigation 方法分析

navigation 方法用于定义子导航图，它允许开发者将导航图进行分层管理，使导航结构更加清晰。下面我们详细分析其实现原理：

kotlin

fun navigation(
    route: String,
    startDestination: String,
    arguments: List<NamedNavArgument> = emptyList(),
    deepLinks: List<NavDeepLink> = emptyList(),
    builder: NavGraphBuilder.() -> Unit
) {
    // 创建一个新的 NavGraphBuilder 实例，用于构建子导航图
    val subGraphBuilder = NavGraphBuilder(navigatorProvider, startDestination)
    // 调用构建函数，构建子导航图
    subGraphBuilder.builder()
    // 获取 ComposeNavigator 导航器
    val navigator = navigatorProvider.get<ComposeNavigator>()
    // 创建一个 NavGraph 对象，用于表示子导航图
    val subGraph = NavGraph(navigator).apply {
        // 设置子导航图的路由
        this.route = route
        // 设置子导航图的起始目的地路由
        this.startDestination = startDestination
        // 设置子导航图的参数
        arguments.forEach { (name, argument) ->
            addArgument(name, argument)
        }
        // 设置子导航图的深度链接
        deepLinks.forEach { deepLink ->
            addDeepLink(deepLink)
        }
        // 将子导航图中的目的地添加到子导航图中
        subGraphBuilder.destinations.forEach { destination ->
            addDestination(destination)
        }
    }
    // 将子导航图添加到当前导航图中
    addDestination(subGraph)
}

代码解释

1. 创建子导航图构建器：

   kotlin

   val subGraphBuilder = NavGraphBuilder(navigatorProvider, startDestination)
   

   创建一个新的 NavGraphBuilder 实例，用于构建子导航图。

2. 构建子导航图：

   kotlin

   subGraphBuilder.builder()
   

   调用传入的构建函数 builder，在子导航图构建器中定义子导航图的目的地和导航关系。

3. 创建子导航图对象：

   kotlin

   val subGraph = NavGraph(navigator).apply {
       // 设置子导航图的路由
       this.route = route
       // 设置子导航图的起始目的地路由
       this.startDestination = startDestination
       // 设置子导航图的参数
       arguments.forEach { (name, argument) ->
           addArgument(name, argument)
       }
       // 设置子导航图的深度链接
       deepLinks.forEach { deepLink ->
           addDeepLink(deepLink)
       }
       // 将子导航图中的目的地添加到子导航图中
       subGraphBuilder.destinations.forEach { destination ->
           addDestination(destination)
       }
   }
   

   创建一个 NavGraph 对象，用于表示子导航图，并设置其路由、起始目的地、参数、深度链接和包含的目的地。

4. 添加子导航图到当前导航图：

   kotlin

   addDestination(subGraph)
   

   将子导航图对象添加到当前导航图中，完成子导航图的构建和集成。

3.5 action 方法分析

action 方法用于定义导航操作，它指定了从一个目的地到另一个目的地的导航路径。下面我们详细分析其实现原理：

kotlin

fun action(
    from: String,
    to: String,
    navOptions: NavOptions? = null
) {
    // 获取源目的地
    val fromDestination = findDestination(from)
    // 获取目标目的地
    val toDestination = findDestination(to)
    if (fromDestination != null && toDestination != null) {
        // 创建一个导航操作
        val action = NavAction(toDestination.id, navOptions)
        // 将导航操作添加到源目的地中
        fromDestination.addAction(action)
    }
}

代码解释

1. 获取源目的地和目标目的地：

   kotlin

   val fromDestination = findDestination(from)
   val toDestination = findDestination(to)
   

   通过 findDestination 方法根据路由查找源目的地和目标目的地。

2. 创建导航操作：

   kotlin

   val action = NavAction(toDestination.id, navOptions)
   

   创建一个 NavAction 对象，用于表示从源目的地到目标目的地的导航操作，并设置导航选项。

3. 添加导航操作到源目的地：

   kotlin

   fromDestination.addAction(action)
   

   将创建好的导航操作添加到源目的地中，这样在导航时就可以根据这个操作进行导航。

四、composable 路由的使用

4.1 基本使用示例

下面是一个使用 composable 路由构建导航图的基本示例：

kotlin

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun NavigationExample() {
    // 创建一个导航控制器
    val navController = rememberNavController()

    // 定义导航图
    NavHost(
        navController = navController,
        startDestination = "screen1"
    ) {
        // 定义第一个屏幕的路由
        composable(route = "screen1") {
            // 第一个屏幕的内容
            Text(text = "Screen 1")
            Button(onClick = {
                // 导航到第二个屏幕
                navController.navigate("screen2")
            }) {
                Text(text = "Go to Screen 2")
            }
        }
        // 定义第二个屏幕的路由
        composable(route = "screen2") {
            // 第二个屏幕的内容
            Text(text = "Screen 2")
            Button(onClick = {
                // 返回第一个屏幕
                navController.popBackStack()
            }) {
                Text(text = "Go back to Screen 1")
            }
        }
    }
}

4.2 代码解释

1. 创建导航控制器：

   kotlin

   val navController = rememberNavController()
   

   使用 rememberNavController 函数创建一个导航控制器，用于控制导航操作。

2. 定义导航图：

   kotlin

   NavHost(
       navController = navController,
       startDestination = "screen1"
   ) {
       // ...
   }
   

   使用 NavHost 组件定义导航图，指定导航控制器和起始目的地。

3. 定义路由：

   kotlin

   composable(route = "screen1") {
       // ...
   }
   composable(route = "screen2") {
       // ...
   }
   

   使用 composable 方法定义两个路由，分别表示两个屏幕。每个路由都有一个唯一的字符串标识，以及一个可组合函数作为屏幕的内容。

4. 导航操作：

   kotlin

   Button(onClick = {
       // 导航到第二个屏幕
       navController.navigate("screen2")
   }) {
       Text(text = "Go to Screen 2")
   }
   Button(onClick = {
       // 返回第一个屏幕
       navController.popBackStack()
   }) {
       Text(text = "Go back to Screen 1")
   }
   

   在屏幕内容中，使用 navController.navigate 方法进行导航操作，使用 navController.popBackStack 方法返回上一个屏幕。

4.3 传递参数

在实际应用中，我们经常需要在不同的屏幕之间传递参数。下面是一个传递参数的示例：

kotlin

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument

@Composable
fun NavigationWithParamsExample() {
    // 创建一个导航控制器
    val navController = rememberNavController()

    // 定义导航图
    NavHost(
        navController = navController,
        startDestination = "screen1"
    ) {
        // 定义第一个屏幕的路由
        composable(route = "screen1") {
            // 第一个屏幕的内容
            Text(text = "Screen 1")
            Button(onClick = {
                // 导航到第二个屏幕，并传递参数
                navController.navigate("screen2/John")
            }) {
                Text(text = "Go to Screen 2 with param")
            }
        }
        // 定义第二个屏幕的路由，并接收参数
        composable(
            route = "screen2/{name}",
            arguments = listOf(
                navArgument("name") { type = NavType.StringType }
            )
        ) { backStackEntry ->
            // 获取传递的参数
            val name = backStackEntry.arguments?.getString("name")
            // 第二个屏幕的内容
            Text(text = "Screen 2, Hello $name!")
            Button(onClick = {
                // 返回第一个屏幕
                navController.popBackStack()
            }) {
                Text(text = "Go back to Screen 1")
            }
        }
    }
}

4.4 代码解释

1. 定义带参数的路由：

   kotlin

   composable(
       route = "screen2/{name}",
       arguments = listOf(
           navArgument("name") { type = NavType.StringType }
       )
   ) { backStackEntry ->
       // ...
   }
   

   在路由定义中，使用 {name} 表示一个参数，通过 arguments 列表指定参数的类型。

2. 传递参数：

   kotlin

   navController.navigate("screen2/John")
   

   在导航时，将参数直接添加到路由字符串中。

3. 获取参数：

   kotlin

   val name = backStackEntry.arguments?.getString("name")
   

   在目标屏幕中，通过 backStackEntry.arguments 获取传递的参数。

五、导航图构建的高级应用

5.1 嵌套导航图

在复杂的应用中，我们可能需要使用嵌套导航图来管理不同模块的导航。下面是一个嵌套导航图的示例：

kotlin

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.navigation
import androidx.navigation.compose.rememberNavController

@Composable
fun NestedNavGraphExample() {
    // 创建一个导航控制器
    val navController = rememberNavController()

    // 定义主导航图
    NavHost(
        navController = navController,
        startDestination = "main"
    ) {
        // 定义主屏幕的路由
        composable(route = "main") {
            // 主屏幕的内容
            Text(text = "Main Screen")
            Button(onClick = {
                // 导航到子导航图
                navController.navigate("subGraph")
            }) {
                Text(text = "Go to Sub Graph")
            }
        }
        // 定义子导航图
        navigation(
            route = "subGraph",
            startDestination = "subScreen1"
        ) {
            // 定义子屏幕 1 的路由
            composable(route = "subScreen1") {
                // 子屏幕 1 的内容
                Text(text = "Sub Screen 1")
                Button(onClick = {
                    // 导航到子屏幕 2
                    navController.navigate("subScreen2")
                }) {
                    Text(text = "Go to Sub Screen 2")
                }
            }
            // 定义子屏幕 2 的路由
            composable(route = "subScreen2") {
                // 子屏幕 2 的内容
                Text(text = "Sub Screen 2")
                Button(onClick = {
                    // 返回主屏幕
                    navController.popBackStack("main", inclusive = false)
                }) {
                    Text(text = "Go back to Main Screen")
                }
            }
        }
    }
}

5.2 代码解释

1. 定义主导航图：

   kotlin

   NavHost(
       navController = navController,
       startDestination = "main"
   ) {
       // ...
   }
   

   使用 NavHost 组件定义主导航图，指定导航控制器和起始目的地。

2. 定义子导航图：

   kotlin

   navigation(
       route = "subGraph",
       startDestination = "subScreen1"
   ) {
       // ...
   }
   

   使用 navigation 方法定义子导航图，指定子导航图的路由和起始目的地。

3. 导航到子导航图：

   kotlin

   navController.navigate("subGraph")
   

   在主屏幕中，通过 navController.navigate 方法导航到子导航图。

4. 在子导航图中导航：

   kotlin

   navController.navigate("subScreen2")
   

   在子导航图中，通过 navController.navigate 方法在子屏幕之间进行导航。

5. 返回主屏幕：

   kotlin

   navController.popBackStack("main", inclusive = false)
   

   在子屏幕中，通过 navController.popBackStack 方法返回主屏幕。

5.3 条件导航

在某些情况下，我们可能需要根据条件进行导航。下面是一个条件导航的示例：

kotlin

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun ConditionalNavigationExample() {
    // 创建一个导航控制器
    val navController = rememberNavController()
    // 定义一个状态变量，用于控制条件
    var isLoggedIn by remember { mutableStateOf(false) }

    // 定义导航图
    NavHost(
        navController = navController,
        startDestination = "login"
    ) {
        // 定义登录屏幕的路由
        composable(route = "login") {
            // 登录屏幕的内容
            Text(text = "Login Screen")
            Button(onClick = {
                // 模拟登录成功
                isLoggedIn = true
                // 根据条件导航到不同的屏幕
                if (isLoggedIn) {
                    navController.navigate("home")
                } else {
                    navController.navigate("error")
                }
            }) {
                Text(text = "Login")
            }
        }
        // 定义主页屏幕的路由
        composable(route = "home") {
            // 主页屏幕的内容
            Text(text = "Home Screen")
            Button(onClick = {
                // 模拟退出登录
                isLoggedIn = false
                // 导航到登录屏幕
                navController.navigate("login")
            }) {
                Text(text = "Logout")
            }
        }
        // 定义错误屏幕的路由
        composable(route = "error") {
            // 错误屏幕的内容
            Text(text = "Error Screen")
            Button(onClick = {
                // 导航到登录屏幕
                navController.navigate("login")
            }) {
                Text(text = "Go back to Login")
            }
        }
    }
}

5.4 代码解释

1. 定义状态变量：

   kotlin

   var isLoggedIn by remember { mutableStateOf(false) }
   

   使用 mutableStateOf 定义一个状态变量 isLoggedIn，用于控制条件。

2. 条件导航：

   kotlin

   if (isLoggedIn) {
       navController.navigate("home")
   } else {
       navController.navigate("error")
   }
   

   在登录按钮的点击事件中，根据 isLoggedIn 的值进行条件导航。

3. 状态更新和导航：

   kotlin

   isLoggedIn = false
   navController.navigate("login")
   

   在退出登录按钮的点击事件中，更新 isLoggedIn 的值，并导航到登录屏幕。

六、导航图构建的性能优化

6.1 减少不必要的路由定义

在构建导航图时，要避免定义不必要的路由。每个路由都会占用一定的内存和资源，过多的路由会增加导航系统的负担。例如，在一个简单的应用中，如果某些屏幕之间的导航关系非常固定，不需要动态导航，可以将这些屏幕合并为一个路由，减少路由的数量。

6.2 延迟加载路由内容

对于一些不常用的屏幕，可以采用延迟加载的方式，即只有在用户导航到该屏幕时才加载其内容。这样可以减少应用启动时的内存占用，提高应用的启动速度。例如，可以使用 LazyColumn 或 LazyRow 来延迟加载列表项的内容。

6.3 优化导航动画

导航动画虽然可以提升用户体验，但如果动画过于复杂，会消耗大量的 CPU 和 GPU 资源，导致应用卡顿。因此，要优化导航动画，选择简单、流畅的动画效果。例如，可以使用 Android Compose 提供的默认动画，或者自定义一些轻量级的动画。

6.4 缓存路由状态

在某些情况下，用户可能会频繁地在不同的屏幕之间切换。为了避免每次切换都重新创建和销毁屏幕，可以缓存路由的状态。例如，可以使用 rememberSaveable 函数来保存和恢复屏幕的状态。

kotlin

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun CachedNavigationExample() {
    // 创建一个导航控制器
    val navController = rememberNavController()
    // 定义一个状态变量，用于记录屏幕的状态
    var counter by rememberSaveable { mutableStateOf(0) }

    // 定义导航图
    NavHost(
        navController = navController,
        startDestination = "screen1"
    ) {
        // 定义第一个屏幕的路由
        composable(route = "screen1") {
            // 第一个屏幕的内容
            Text(text = "Screen 1, Counter: $counter")
            Button(onClick = {
                // 增加计数器的值
                counter++
                // 导航到第二个屏幕
                navController.navigate("screen2")
            }) {
                Text(text = "Go to Screen 2")
            }
        }
        // 定义第二个屏幕的路由
        composable(route = "screen2") {
            // 第二个屏幕的内容
            Text(text = "Screen 2, Counter: $counter")
            Button(onClick = {
                // 导航回第一个屏幕
                navController.popBackStack()
            }) {
                Text(text = "Go back to Screen 1")
            }
        }
    }
}

代码解释

1. 使用 rememberSaveable 缓存状态：

   kotlin

   var counter by rememberSaveable { mutableStateOf(0) }
   

   使用 rememberSaveable 函数缓存 counter 变量的状态，这样在屏幕切换时，counter 的值不会丢失。

2. 状态更新和导航：

   kotlin

   counter++
   navController.navigate("screen2")
   

   在第一个屏幕中，增加 counter 的值，并导航到第二个屏幕。在第二个屏幕中，counter 的值保持不变。

七、导航图构建的兼容性问题及解决方案

7.1 不同 Android 版本的兼容性

不同的 Android 版本可能对 Android Compose 导航系统的支持存在差异。例如，一些较旧的 Android 版本可能不支持某些新的导航特性或 API。为了确保应用在不同版本的 Android 系统上都能正常工作，可以采用以下解决方案：

• 版本检查：在代码中进行 Android 版本检查，根据不同的版本提供不同的实现方式。例如：

kotlin

import android.os.Build
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun VersionCompatibilityExample() {
    // 创建一个导航控制器
    val navController = rememberNavController()

    // 定义导航图
    NavHost(
        navController = navController,
        startDestination = "screen1"
    ) {
        // 定义第一个屏幕的路由
        composable(route = "screen1") {
            // 第一个屏幕的内容
            Text(text = "Screen 1")
            Button(onClick = {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
                    // 使用较新的 API 进行导航
                    navController.navigate("screen2")
                } else {
                    // 使用较旧的 API 进行导航
                    // 这里可以根据实际情况实现较旧的导航逻辑
                    navController.navigate("screen2")
                }
            }) {
                Text(text = "Go to Screen 2")
            }
        }
        // 定义第二个屏幕的路由
        composable(route = "screen2") {
            // 第二个屏幕的内容
            Text(text = "Screen 2")
            Button(onClick = {
                // 返回第一个屏幕
                navController.popBackStack()
            }) {
                Text(text = "Go back to Screen 1")
            }
        }
    }
}

• 兼容性库：使用 Android 官方提供的兼容性库，这些库可以在不同的 Android 版本上提供统一的 API 支持。

7.2 不同设备的兼容性

不同的设备可能具有不同的屏幕尺寸、分辨率和输入方式，这可能会影响导航图的显示和操作。为了确保应用在不同设备上都能提供良好的导航体验，可以采用以下解决方案：

• 响应式设计：使用 Android Compose 提供的响应式布局组件，如 Column、Row、Box 等，根据设备的屏幕尺寸和分辨率自动调整布局。例如：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun ResponsiveNavigationExample() {
    // 创建一个导航控制器
    val navController = rememberNavController()
    // 定义一个状态变量，用于控制布局方向
    var isVertical by remember { mutableStateOf(true) }

    // 定义导航图
    NavHost(
        navController = navController,
        startDestination = "screen1"
    ) {
        // 定义第一个屏幕的路由
        composable(route = "screen1") {
            // 根据 isVertical 的值选择不同的布局
            if (isVertical) {
                Column {
                    Text(text = "Screen 1 (Vertical)")
                    Button(onClick = {
                        // 切换布局方向
                        isVertical = false
                        // 导航到第二个屏幕
                        navController.navigate("screen2")
                    }) {
                        Text(text = "Go to Screen 2")
                    }
                }
            } else {
                Row {
                    Text(text = "Screen 1 (Horizontal)")
                    Button(onClick = {
                        // 切换布局方向
                        isVertical = true
                        // 导航到第二个屏幕
                        navController.navigate("screen2")
                    }) {
                        Text(text = "Go to Screen 2")
                    }
                }
            }
        }
        // 定义第二个屏幕的路由
        composable(route = "screen2") {
            // 第二个屏幕的内容
            Text(text = "Screen 2")
            Button(onClick = {
                // 返回第一个屏幕
                navController.popBackStack()
            }) {
                Text(text = "Go back to Screen 1")
            }
        }
    }
}

@Preview
@Composable
fun ResponsiveNavigationExamplePreview() {
    ResponsiveNavigationExample()
}

• 输入方式适配：针对不同的输入方式（如触摸、键盘、遥控器等）进行适配。例如，在触摸设备上，导航可以通过点击按钮来实现；在键盘设备上，导航可以通过方向键和回车键来实现。