Android Compose 框架的导航与路由模块之导航图构建深入分析(三十四)
Android Compose 框架的导航与路由模块之导航图构建深入分析一、引言
在今世 Android 应用开发中，导航与路由是构建用户界面的关键部门。精良的导航设计可以或许让用户轻松地在差别的界面之间进行切换，提拔应用的用户体验。Android Compose 作为新一代的声明式 UI 框架，为开发者提供了强大而灵活的导航与路由功能。其中，导航图构建是 Android Compose 导航体系的焦点，它答应开发者以一种清晰、结构化的方式定义应用的导航结构。本文将从源码级别深入分析 Android Compose 框架中导航图构建的原理和实现，资助开发者更好地理解和运用这一重要特性。
二、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） ：是一个包含多个目的地和它们之间导航关系的图结构。导航图定义了应用的团体导航结构。
三、导航图构建的焦点组件
3.1 NavGraphBuilder
3.1.1 概述
NavGraphBuilder 是 Android Compose 中用于构建导航图的焦点类。它提供了一系列方法来定义导航图中的目的地、路由以及它们之间的导航关系。通过 NavGraphBuilder，开发者可以以一种声明式的方式构建复杂的导航结构。
3.1.2 源码分析
以下是 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.1.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)
}
代码解释
[*]获取导航器：
kotlin
val navigator = navigatorProvider.get<ComposeNavigator>()
通过 navigatorProvider 获取 ComposeNavigator 导航器，ComposeNavigator 是用于处理 Compose 界面导航的导航器。
[*]创建目的地对象：
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 对象，并设置其路由、参数、深度链接和内容。
[*]添加目的地到导航图：
kotlin
addDestination(destination)
将创建好的目的地对象添加到导航图中，这样导航体系就可以识别和管理该目的地。
3.1.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)
} 代码解释
[*]创建子导航图构建器：
kotlin
val subGraphBuilder = NavGraphBuilder(navigatorProvider, startDestination)
创建一个新的 NavGraphBuilder 实例，用于构建子导航图。
[*]构建子导航图：
kotlin
subGraphBuilder.builder()
调用传入的构建函数 builder，在子导航图构建器中定义子导航图的目的地和导航关系。
[*]创建子导航图对象：
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 对象，用于表现子导航图，并设置其路由、起始目的地、参数、深度链接和包含的目的地。
[*]添加子导航图到当前导航图：
kotlin
addDestination(subGraph)
将子导航图对象添加到当前导航图中，完成子导航图的构建和集成。
3.1.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)
}
}
代码解释
[*]获取源目的地和目的目的地：
kotlin
val fromDestination = findDestination(from)
val toDestination = findDestination(to)
通过 findDestination 方法根据路由查找源目的地和目的目的地。
[*]创建导航操作：
kotlin
val action = NavAction(toDestination.id, navOptions)
创建一个 NavAction 对象，用于表现从源目的地到目的目的地的导航操作，并设置导航选项。
[*]添加导航操作到源目的地：
kotlin
fromDestination.addAction(action)
将创建好的导航操作添加到源目的地中，这样在导航时就可以根据这个操作进行导航。
3.2 NavHost
3.2.1 概述
NavHost 是 Android Compose 中用于体现导航图的组件。它吸收一个导航控制器和一个导航图构建器，根据导航控制器的状态体现相应的目的地。
3.2.2 源码分析
以下是 NavHost 的部门源码：
kotlin
@Composable
fun NavHost(
// 导航控制器，用于控制导航操作
navController: NavHostController,
// 导航图的起始目的地路由
startDestination: String,
// 导航图的构建函数，用于定义导航图的结构
builder: NavGraphBuilder.() -> Unit
) {
// 创建一个导航图构建器实例
val navGraphBuilder = NavGraphBuilder(navController.navigatorProvider, startDestination)
// 调用构建函数，构建导航图
navGraphBuilder.builder()
// 获取构建好的导航图
val navGraph = navGraphBuilder.build()
// 设置导航控制器的导航图
navController.graph = navGraph
// 显示导航图中的当前目的地
NavHostImpl(
navController = navController,
navGraph = navGraph
)
}
@Composable
private fun NavHostImpl(
// 导航控制器
navController: NavHostController,
// 导航图
navGraph: NavGraph
) {
// 获取当前的导航回退栈
val backStackEntry by navController.currentBackStackEntryAsState()
// 根据当前的导航回退栈条目显示相应的目的地
backStackEntry?.destination?.let { destination ->
// 调用目的地的内容可组合函数
destination.content(backStackEntry)
}
}
3.2.3 代码解释
[*]构建导航图：
kotlin
val navGraphBuilder = NavGraphBuilder(navController.navigatorProvider, startDestination)
navGraphBuilder.builder()
val navGraph = navGraphBuilder.build()
创建一个 NavGraphBuilder 实例，调用构建函数 builder 构建导航图，并获取构建好的导航图。
[*]设置导航控制器的导航图：
kotlin
navController.graph = navGraph
将构建好的导航图设置到导航控制器中，这样导航控制器就可以根据导航图进行导航操作。
[*]体现当前目的地：
kotlin
NavHostImpl(
navController = navController,
navGraph = navGraph
)
调用 NavHostImpl 组件，根据导航控制器的当前导航回退栈条目体现相应的目的地。
3.3 NavController
3.3.1 概述
NavController 是 Android Compose 中用于控制导航操作的焦点组件。它提供了一系列方法来进行导航，如 navigate、popBackStack 等。
3.3.2 源码分析
以下是 NavController 的部门源码：
kotlin
class NavHostController @OptIn(ExperimentalLifecycleComposeApi::class) constructor(
// 生命周期所有者，用于管理导航控制器的生命周期
lifecycleOwner: LifecycleOwner,
// 导航器提供者，用于获取不同类型的导航器
navigatorProvider: NavigatorProvider = NavigatorProvider()
) : NavController(lifecycleOwner, navigatorProvider) {
// 导航到指定的路由
override fun navigate(
route: String,
navOptions: NavOptions? = null,
navigatorExtras: Navigator.Extras? = null
) {
// 调用父类的 navigate 方法进行导航
super.navigate(route, navOptions, navigatorExtras)
}
// 返回上一个目的地
override fun popBackStack(
popUpTo: String? = null,
inclusive: Boolean = false,
saveState: Boolean = false
): Boolean {
// 调用父类的 popBackStack 方法返回上一个目的地
return super.popBackStack(popUpTo, inclusive, saveState)
}
}
3.3.3 代码解释
[*]导航到指定路由：
kotlin
override fun navigate(
route: String,
navOptions: NavOptions? = null,
navigatorExtras: Navigator.Extras? = null
) {
super.navigate(route, navOptions, navigatorExtras)
}
调用父类的 navigate 方法，根据指定的路由进行导航操作。可以通过 navOptions 参数设置导航的选项，如动画结果等。
[*]返回上一个目的地：
kotlin
override fun popBackStack(
popUpTo: String? = null,
inclusive: Boolean = false,
saveState: Boolean = false
): Boolean {
return super.popBackStack(popUpTo, inclusive, saveState)
}
调用父类的 popBackStack 方法，返回上一个目的地。可以通过 popUpTo 参数指定返回到哪个目的地，inclusive 参数指定是否包含指定的目的地，saveState 参数指定是否生存导航状态。
四、导航图构建的根本利用
4.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.rememberNavController
@Composable
fun SimpleNavigationExample() {
// 创建一个导航控制器
val navController = rememberNavController()
// 定义导航图
NavHost(
navController = navController,
startDestination = "login"
) {
// 定义登录屏幕的路由
composable(route = "login") {
// 登录屏幕的内容
Text(text = "Login Screen")
Button(onClick = {
// 导航到主页屏幕
navController.navigate("home")
}) {
Text(text = "Go to Home")
}
}
// 定义主页屏幕的路由
composable(route = "home") {
// 主页屏幕的内容
Text(text = "Home Screen")
Button(onClick = {
// 返回登录屏幕
navController.popBackStack()
}) {
Text(text = "Go back to Login")
}
}
}
}
4.2 代码解释
[*]创建导航控制器：
kotlin
val navController = rememberNavController()
利用 rememberNavController 函数创建一个导航控制器，用于控制导航操作。
[*]定义导航图：
kotlin
NavHost(
navController = navController,
startDestination = "login"
) {
// ...
}
利用 NavHost 组件定义导航图，指定导航控制器和起始目的地。
[*]定义路由：
kotlin
composable(route = "login") {
// ...
}
composable(route = "home") {
// ...
}
利用 composable 方法定义两个路由，分别表现登录屏幕和主页屏幕。每个路由都有一个唯一的字符串标识，以及一个可组合函数作为屏幕的内容。
[*]导航操作：
kotlin
navController.navigate("home")
navController.popBackStack()
在登录屏幕中，利用 navController.navigate 方法导航到主页屏幕；在主页屏幕中，利用 navController.popBackStack 方法返回登录屏幕。
4.3 转达参数
在现实应用中，我们经常需要在差别的屏幕之间转达参数。下面是一个转达参数的示例：
kotlin
import androidx.compose.material.Buttonimport androidx.compose.material.Textimport androidx.compose.runtime.Composableimport androidx.navigation.NavHostControllerimport androidx.navigation.NavTypeimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.rememberNavControllerimport androidx.navigation.navArgument@Composablefun 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 代码解释
[*]定义带参数的路由：
kotlin
composable(
route = "screen2/{name}",
arguments = listOf(
navArgument("name") { type = NavType.StringType }
)
) { backStackEntry ->
// ...
}
在路由定义中，利用 {name} 表现一个参数，通过 arguments 列表指定参数的类型。
[*]转达参数：
kotlin
navController.navigate("screen2/John")
在导航时，将参数直接添加到路由字符串中。
[*]获取参数：
kotlin
val name = backStackEntry.arguments?.getString("name")
在目的屏幕中，通过 backStackEntry.arguments 获取转达的参数。
五、导航图构建的高级应用
5.1 嵌套导航图
在复杂的应用中，我们大概需要利用嵌套导航图来管理差别模块的导航。下面是一个嵌套导航图的示例：
kotlin
import androidx.compose.material.Buttonimport androidx.compose.material.Textimport androidx.compose.runtime.Composableimport androidx.navigation.NavHostControllerimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.navigationimport androidx.navigation.compose.rememberNavController@Composablefun 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 代码解释
[*]定义主导航图：
kotlin
NavHost(
navController = navController,
startDestination = "main"
) {
// ...
}
利用 NavHost 组件定义主导航图，指定导航控制器和起始目的地。
[*]定义子导航图：
kotlin
navigation(
route = "subGraph",
startDestination = "subScreen1"
) {
// ...
}
利用 navigation 方法定义子导航图，指定子导航图的路由和起始目的地。
[*]导航到子导航图：
kotlin
navController.navigate("subGraph")
在主屏幕中，通过 navController.navigate 方法导航到子导航图。
[*]在子导航图中导航：
kotlin
navController.navigate("subScreen2")
在子导航图中，通过 navController.navigate 方法在子屏幕之间进行导航。
[*]返回主屏幕：
kotlin
navController.popBackStack("main", inclusive = false)
在子屏幕中，通过 navController.popBackStack 方法返回主屏幕。
5.3 条件导航
在某些情况下，我们大概需要根据条件进行导航。下面是一个条件导航的示例：
kotlin
import androidx.compose.material.Buttonimport androidx.compose.material.Textimport androidx.compose.runtime.Composableimport androidx.compose.runtime.mutableStateOfimport androidx.compose.runtime.rememberimport androidx.navigation.NavHostControllerimport androidx.navigation.compose.NavHostimport androidx.compose.runtime.getValueimport androidx.compose.runtime.setValueimport androidx.navigation.compose.composableimport androidx.navigation.compose.rememberNavController@Composablefun 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 代码解释
[*]定义状态变量：
kotlin
var isLoggedIn by remember { mutableStateOf(false) }
利用 mutableStateOf 定义一个状态变量 isLoggedIn，用于控制条件。
[*]条件导航：
kotlin
if (isLoggedIn) {
navController.navigate("home")
} else {
navController.navigate("error")
}
在登录按钮的点击变乱中，根据 isLoggedIn 的值进行条件导航。
[*]状态更新和导航：
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.Buttonimport androidx.compose.material.Textimport androidx.compose.runtime.Composableimport androidx.compose.runtime.getValueimport androidx.compose.runtime.mutableStateOfimport androidx.compose.runtime.rememberimport androidx.compose.runtime.setValueimport androidx.navigation.NavHostControllerimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.rememberNavController@Composablefun 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") } } }} 代码解释
[*]利用 rememberSaveable 缓存状态：
kotlin
var counter by rememberSaveable { mutableStateOf(0) }
利用 rememberSaveable 函数缓存 counter 变量的状态，这样在屏幕切换时，counter 的值不会丢失。
[*]状态更新和导航：
kotlin
counter++
navController.navigate("screen2")
在第一个屏幕中，增加 counter 的值，并导航到第二个屏幕。在第二个屏幕中，counter 的值保持不变。
七、导航图构建的兼容性问题及解决方案
7.1 差别 Android 版本的兼容性
差别的 Android 版本大概对 Android Compose 导航体系的支持存在差别。例如，一些较旧的 Android 版本大概不支持某些新的导航特性或 API。为了确保应用在差别版本的 Android 体系上都能正常工作，可以采取以下解决方案：
[*]版本查抄：在代码中进行 Android 版本查抄，根据差别的版本提供差别的实现方式。例如：
kotlin
import android.os.Buildimport androidx.compose.material.Buttonimport androidx.compose.material.Textimport androidx.compose.runtime.Composableimport androidx.navigation.NavHostControllerimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.rememberNavController@Composablefun VersionCompatibilityExample() { // 创建一个导航控制器 val navController = rememberNavController()
// 定义导航图 NavHost( navController = navController, startDestination = "screen1" ) { // 定义第一个屏幕的路由 composable(route = "screen1") { // 第一个屏幕的内容 Text(text = "Screen 1 kotlin
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
// 在 Android 7.0 及以上版本使用新特性
Button(onClick = {
// 这里可以使用 7.0 及以上版本支持的导航操作
navController.navigate("screen2")
}) {
Text(text = "Go to Screen 2 (New Feature)")
}
} else {
// 在 Android 7.0 以下版本使用旧的兼容方式
Button(onClick = {
// 这里可以使用旧的导航操作
navController.navigate("screen2")
}) {
Text(text = "Go to Screen 2 (Old Compatibility)")
}
}
}
// 定义第二个屏幕的路由
composable(route = "screen2") {
// 第二个屏幕的内容
Text(text = "Screen 2")
Button(onClick = {
// 返回第一个屏幕
navController.popBackStack()
}) {
Text(text = "Go back to Screen 1")
}
}
}
}
代码解释
[*]版本查抄：通过 Build.VERSION.SDK_INT >= Build.VERSION_CODES.N 来判定当前 Android 体系版本是否为 7.0 及以上。
[*]差别版本处理：假如是 7.0 及以上版本，可以利用一些新的导航特性；假如是 7.0 以下版本，则利用旧的兼容方式进行导航操作，以确保应用在差别版本的体系上都能正常运行。
7.2 与其他库的兼容性
在现实开发中，Android Compose 导航体系大概会与其他第三方库一起利用，这大概会引发一些兼容性问题。例如，某些库大概会修改 Android 的生命周期或变乱处理机制，从而影响导航体系的正常工作。以下是一些常见的兼容性问题及解决方案：
7.2.1 与 ViewModel 库的兼容性
ViewModel 是 Android 架构组件中用于管理 UI 相关数据的类，在利用 Android Compose 导航体系时，大概需要在差别的屏幕之间共享 ViewModel。为了确保兼容性，可以采取以下方法：
kotlin
import androidx.compose.runtime.Composableimport androidx.lifecycle.viewmodel.compose.viewModelimport androidx.navigation.NavHostControllerimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.rememberNavController// 定义一个 ViewModelclass MyViewModel { // 这里可以定义一些需要共享的数据和方法 var sharedData: String = "Default Data"}@Composablefun ViewModelCompatibilityExample() { // 创建一个导航控制器 val navController = rememberNavController()
// 获取 ViewModel 实例 val myViewModel: MyViewModel = viewModel() // 定义导航图 NavHost( navController = navController, startDestination = "screen1" ) { // 定义第一个屏幕的路由 composable(route = "screen1") { // 第一个屏幕的内容 // 可以访问和修改 ViewModel 中的数据 myViewModel.sharedData = "New Data from Screen 1" // 导航到第二个屏幕 navController.navigate("screen2") } // 定义第二个屏幕的路由 composable(route = "screen2") { // 第二个屏幕的内容 // 可以获取并体现 ViewModel 中的数据 val data = myViewModel.sharedData // 这里可以根据 data 进行相应的 UI 体现 } }} 代码解释
[*]获取 ViewModel 实例：利用 viewModel() 函数获取 MyViewModel 的实例，确保在整个导航过程中利用的是同一个 ViewModel 实例，从而实现数据的共享。
[*]数据共享：在第一个屏幕中修改 MyViewModel 中的 sharedData，在第二个屏幕中可以获取并利用该数据，实现了差别屏幕之间的数据共享。
7.2.2 与动画库的兼容性
在利用 Android Compose 导航体系时，大概会联合一些动画库来实现更丰富的导航动画结果。但差别的动画库大概会与导航体系的动画机制产生冲突。为了制止这种情况，可以采取以下方法：
kotlin
import androidx.compose.animation.AnimatedVisibilityimport androidx.compose.animation.fadeInimport androidx.compose.animation.fadeOutimport androidx.compose.material.Buttonimport androidx.compose.material.Textimport androidx.compose.runtime.Composableimport androidx.compose.runtime.getValueimport androidx.compose.runtime.mutableStateOfimport androidx.compose.runtime.rememberimport androidx.compose.runtime.setValueimport androidx.navigation.NavHostControllerimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.rememberNavController@Composablefun AnimationLibraryCompatibilityExample() { // 创建一个导航控制器 val navController = rememberNavController()
// 定义一个状态变量，用于控制动画的体现和隐藏 var isVisible by remember { mutableStateOf(true) } // 定义导航图 NavHost( navController = navController, startDestination = "screen1" ) { // 定义第一个屏幕的路由 composable(route = "screen1") { // 第一个屏幕的内容 AnimatedVisibility( visible = isVisible, enter = fadeIn(), exit = fadeOut() ) { Text(text = "Screen 1") } Button(onClick = { // 隐藏动画 isVisible = false // 导航到第二个屏幕 navController.navigate("screen2") }) { Text(text = "Go to Screen 2") } } // 定义第二个屏幕的路由 composable(route = "screen2") { // 第二个屏幕的内容 Text(text = "Screen 2") Button(onClick = { // 体现动画 isVisible = true // 返回第一个屏幕 navController.popBackStack() }) { Text(text = "Go back to Screen 1") } } }} 代码解释
[*]利用 AnimatedVisibility 组件：通过 AnimatedVisibility 组件实现简单的淡入淡出动画结果，制止与导航体系的动画机制产生冲突。
[*]状态控制：利用 isVisible 状态变量来控制动画的体现和隐藏，在导航过程中根据需要进行状态的更新。
7.3 装备兼容性
差别的装备（如手机、平板、可穿戴装备等）具有差别的屏幕尺寸和分辨率，这大概会影响 Android Compose 导航体系的体现结果。为了确保应用在差别装备上都能有精良的用户体验，可以采取以下解决方案：
7.3.1 响应式布局
利用 Android Compose 的响应式布局特性，根据装备的屏幕尺寸和方向自动调整 UI 的布局。例如：
kotlin
import androidx.compose.foundation.layout.Arrangementimport androidx.compose.foundation.layout.Columnimport androidx.compose.foundation.layout.Rowimport androidx.compose.foundation.layout.fillMaxSizeimport androidx.compose.material.Buttonimport androidx.compose.material.Textimport androidx.compose.runtime.Composableimport androidx.compose.ui.Alignmentimport androidx.compose.ui.Modifierimport androidx.compose.ui.platform.LocalConfigurationimport androidx.navigation.NavHostControllerimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.rememberNavController@Composablefun DeviceCompatibilityExample() { // 创建一个导航控制器 val navController = rememberNavController()
// 获取当前装备的配置信息 val configuration = LocalConfiguration.current // 判定当前装备的屏幕方向 val isLandscape = configuration.orientation == android.content.res.Configuration.ORIENTATION_LANDSCAPE // 定义导航图 NavHost( navController = navController, startDestination = "screen1" ) { // 定义第一个屏幕的路由 composable(route = "screen1") { if (isLandscape) { // 横屏布局 Row( modifier = Modifier.fillMaxSize(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically ) { Text(text = "Screen 1 (Landscape)") Button(onClick = { // 导航到第二个屏幕 navController.navigate("screen2") }) { Text(text = "Go to Screen 2") } } } else { // 竖屏布局 Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Text(text = "Screen 1 (Portrait)") Button(onClick = { // 导航到第二个屏幕 navController.navigate("screen2") }) { Text(text = "Go to Screen 2") } } } } // 定义第二个屏幕的路由 composable(route = "screen2") { if (isLandscape) { // 横屏布局 Row( modifier = Modifier.fillMaxSize(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically ) { Text(text = "Screen 2 (Landscape)") Button(onClick = { // 返回第一个屏幕 navController.popBackStack() }) { Text(text = "Go back to Screen 1") } } } else { // 竖屏布局 Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Text(text = "Screen 2 (Portrait)") Button(onClick = { // 返回第一个屏幕 navController.popBackStack() }) { Text(text = "Go back to Screen 1") } } } } }} 代码解释
[*]获取装备配置信息：利用 LocalConfiguration.current 获取当前装备的配置信息，通过 configuration.orientation 判定装备的屏幕方向。
[*]响应式布局：根据屏幕方向的差别，利用 Row 或 Column 组件进行差别的布局，确保在横屏和竖屏模式下都能有精良的体现结果。
7.3.2 适配差别屏幕尺寸
对于差别屏幕尺寸的装备，可以利用 Modifier 来调整 UI 元素的巨细和间距。例如：
kotlin
import androidx.compose.foundation.layout.Columnimport androidx.compose.foundation.layout.fillMaxSizeimport androidx.compose.foundation.layout.paddingimport androidx.compose.material.Buttonimport androidx.compose.material.Textimport androidx.compose.runtime.Composableimport androidx.compose.ui.Modifierimport androidx.compose.ui.unit.dpimport androidx.navigation.NavHostControllerimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.rememberNavController@Composablefun ScreenSizeCompatibilityExample() { // 创建一个导航控制器 val navController = rememberNavController()
// 定义导航图 NavHost( navController = navController, startDestination = "screen1" ) { // 定义第一个屏幕的路由 composable(route = "screen1") { Column( modifier = Modifier .fillMaxSize() .padding(16.dp) ) { Text(text = "Screen 1") Button( modifier = Modifier.padding(top = 16.dp), onClick = { // 导航到第二个屏幕 navController.navigate("screen2") } ) { Text(text = "Go to Screen 2") } } } // 定义第二个屏幕的路由 composable(route = "screen2") { Column( modifier = Modifier .fillMaxSize() .padding(16.dp) ) { Text(text = "Screen 2") Button( modifier = Modifier.padding(top = 16.dp), onClick = { // 返回第一个屏幕 navController.popBackStack() } ) { Text(text = "Go back to Screen 1") } } } }} 代码解释
[*]利用 Modifier 调整布局：通过 Modifier.padding() 方法为 UI 元素添加内边距，确保在差别屏幕尺寸的装备上都有符合的间距。
[*]填充屏幕：利用 Modifier.fillMaxSize() 方法让 UI 元素填充整个屏幕，顺应差别的屏幕尺寸。
八、导航图构建的测试与调试
8.1 单元测试
在开发 Android Compose 导航体系时，单元测试可以资助我们验证导航图的正确性和导航逻辑的可靠性。以下是一个简单的单元测试示例，利用 JUnit 和 Mockito 框架：
kotlin
import androidx.navigation.NavControllerimport androidx.navigation.NavGraphimport androidx.navigation.compose.NavGraphBuilderimport androidx.navigation.compose.composableimport androidx.test.ext.junit.runners.AndroidJUnit4import org.junit.Beforeimport org.junit.Testimport org.junit.runner.RunWithimport org.mockito.Mockimport org.mockito.MockitoAnnotationsimport org.mockito.kotlin.verify@RunWith(AndroidJUnit4::class)class NavGraphUnitTest { @Mock private lateinit var navController: NavController private lateinit var navGraphBuilder: NavGraphBuilder @Before fun setup() { MockitoAnnotations.openMocks(this) navGraphBuilder = NavGraphBuilder(navController.navigatorProvider, "startDestination") } @Test fun testNavigateToDestination() { // 定义一个路由 val route = "destinationRoute" // 在导航图中添加一个目的地 navGraphBuilder.composable(route = route) { // 这里可以定义目的地的内容 } // 构建导航图 val navGraph: NavGraph = navGraphBuilder.build() // 设置导航控制器的导航图 navController.graph = navGraph
// 模拟导航到指定路由 navController.navigate(route) // 验证导航操作是否被调用 verify(navController).navigate(route) }} 代码解释
[*]Mock 导航控制器：利用 Mockito 框架创建一个 NavController 的模拟对象，用于模拟导航操作。
[*]构建导航图：创建一个 NavGraphBuilder 实例，添加一个目的地并构建导航图。
[*]模拟导航操作：调用 navController.navigate(route) 模拟导航到指定路由，并利用 verify 方法验证导航操作是否被调用。
8.2 集成测试
集成测试可以资助我们验证导航体系与其他组件（如 UI 组件、ViewModel 等）的协同工作情况。以下是一个简单的集成测试示例，利用 Espresso 框架：
kotlin
import androidx.compose.ui.test.junit4.createAndroidComposeRule
import androidx.test.espresso.Espresso.onView
import androidx.test.espresso.action.ViewActions.click
import androidx.test.espresso.matcher.ViewMatchers.withText
import androidx.test.ext.junit.runners.AndroidJUnit4
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith
@RunWith(AndroidJUnit4::class)
class NavGraphIntegrationTest {
@get:Rule
val composeTestRule = createAndroidComposeRule<MainActivity>()
@Test
fun testNavigationBetweenScreens() {
// 等待 UI 绘制完成
composeTestRule.waitForIdle()
// 查找并点击导航按钮
onView(withText("Go to Screen 2")).perform(click())
// 等待导航完成
composeTestRule.waitForIdle()
// 验证是否导航到了目标屏幕
onView(withText("Screen 2")).check(matches(isDisplayed()))
}
}
代码解释
[*]创建测试规则：利用 createAndroidComposeRule<MainActivity>() 创建一个 Android Compose 测试规则，用于启动主运动。
[*]模拟导航操作：利用 Espresso 框架查找并点击导航按钮，模拟导航操作。
[*]验证导航结果：利用 onView(withText("Screen 2")).check(matches(isDisplayed())) 验证是否成功导航到了目的屏幕。
8.3 调试技巧
在开发过程中，我们大概会遇到一些导航问题，如导航失败、屏幕体现异常等。以下是一些调试技巧：
8.3.1 日记输出
在关键的导航代码处添加日记输出，纪录导航操作的执行过程和相关参数。例如：
kotlin
import android.util.Logimport androidx.navigation.NavControllerimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.rememberNavControllerimport androidx.compose.runtime.Composable@Composablefun DebuggingExample() { val navController = rememberNavController()
NavHost( navController = navController, startDestination = "screen1" ) { composable(route = "screen1") { Log.d("NavigationDebug", "Entering Screen 1") // 导航到第二个屏幕 navController.navigate("screen2") Log.d("NavigationDebug", "Navigating to Screen 2") } composable(route = "screen2") { Log.d("NavigationDebug", "Entering Screen 2") } }} 代码解释
[*]添加日记输出：利用 Log.d() 方法在关键的导航代码处添加日记输出，纪录导航操作的执行过程和相关信息。
[*]查察日记信息：在 Android Studio 的 Logcat 窗口中查察日记信息，资助我们分析导航问题。
8.3.2 利用调试工具
Android Studio 提供了一些调试工具，如布局查抄器、内存分析器等，可以资助我们调试导航体系。例如，利用布局查抄器可以查察当前屏幕的布局结构，查抄 UI 元素是否正确体现；利用内存分析器可以查察导航过程中的内存利用情况，找出大概的内存走漏问题。
九、总结与展望
9.1 总结
通过对 Android Compose 框架的导航与路由模块之导航图构建的深入分析，我们可以看到导航图构建在 Android 应用开发中具有重要的作用。它为开发者提供了一种清晰、结构化的方式来定义应用的导航结构，使得应用的导航逻辑更加易于管理和维护。
9.1.1 焦点组件的上风
[*]NavGraphBuilder：作为构建导航图的焦点类，它提供了丰富的方法来定义目的地、路由和导航关系，使得导航图的构建变得简单而灵活。通过 composable 方法可以轻松定义可组合的目的地，通过 navigation 方法可以实现嵌套导航图，满足复杂应用的导航需求。
[*]NavHost：负责体现导航图中的当前目的地，根据导航控制器的状态动态更新 UI。它与 NavGraphBuilder 紧密共同，将导航图的定义转化为现实的 UI 体现。
[*]NavController：控制导航操作的焦点组件，提供了 navigate、popBackStack 等方法，使得开发者可以方便地实现屏幕之间的导航。同时，它还支持转达参数，方便差别屏幕之间的数据交互。
9.1.2 现实应用中的价值
在现实应用中，导航图构建可以资助开发者更好地构造应用的导航逻辑，提高代码的可读性和可维护性。通过合理利用嵌套导航图和条件导航，可以实现复杂的导航流程，提拔用户体验。此外，导航图构建还支持性能优化和兼容性处理，确保应用在差别的装备和 Android 版本上都能正常运行。
9.2 展望
随着 Android 技术的不停发展，Android Compose 框架的导航与路由模块也将不停美满和发展。以下是一些大概的发展方向：
9.2.1 更强大的导航动画
目前，Android Compose 提供了一些根本的导航动画结果，但在未来，大概会支持更多种类的动画结果，如 3D 动画、转场动画等，以满足开发者对更炫酷、更流通导航体验的需求。
9.2.2 更好的与其他框架的集成
随着 Android 生态体系的不停丰富，Android Compose 导航体系大概会更好地与其他框架（如 Kotlin Flow、Room 等）集成，提供更强大的功能。例如，与 Kotlin Flow 集成可以实现更高效的数据流管理，与 Room 集成可以实现更方便的数据持久化。
9.2.3 简化开发流程
未来的 Android Compose 导航体系大概会进一步简化开发流程，提供更多的默认配置和模板，减少开发者的代码编写量。例如，提供一些常见的导航模式（如底部导航、侧边栏导航等）的模板，开发者可以直接利用这些模板来快速搭建导航结构。
9.2.4 增强的调试和测试工具
为了提高开发效率和应用的稳定性，未来大概会提供更强大的调试和测试工具。例如，提供可视化的导航图编辑器，让开发者可以直观地编辑和调试导航图；提供更美满的测试框架，支持对导航逻辑的自动化测试。
总之，Android Compose 框架的导航与路由模块之导航图构建为 Android 应用开发带来了全新的体验和便利。随着技术的不停发展，我们有理由相信它将在未来的 Android 开发中发挥更加重要的作用。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]