当前位置：首页 > news >正文

AndroidCompose Navigation导航精通1-基本页面导航与ViewPager

news 来源：原创 2025/5/18 21:19:16

文章目录

- 前言
- 基本页面导航
- - 库依赖
  - 导航核心部件
  - 简单NavHost实现
- ViewPager
- - Pager切换逻辑图阐述
  - Pager导航实战

前言

在当今的移动应用开发中，导航是用户与应用交互的核心环节。随着 Android Compose 的兴起，它为开发者提供了一种全新的、声明式的方式来构建用户界面，同时也带来了更简洁、更高效的导航实现方式。本系列教程将深入探讨如何在 Android Compose 中实现各种导航功能，从基础的页面跳转到复杂的导航架构设计，帮助你全面掌握 Compose Navigation 的精髓。

在本系列的第一部分，我们将聚焦于普通页面导航的基础知识。通过实际的代码示例，你将学会如何在 Compose 中设置导航图，定义导航目标，并实现页面之间的跳转。

此文章最终将会带您实现以下结果：
在这里插入图片描述

如果在此之前您有相关代码基础，可以直接浏览已经编写好的源码：
NavigationDemo 源码仓库

基本页面导航

库依赖

请将当前的库添加到build.gradle.kts内，这个是模块的gradle，不是项目的gradle
在这里插入图片描述

// Navigation
implementation("androidx.navigation:navigation-compose:2.8.2")
implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.1")
// Icons
implementation("androidx.compose.material:material-icons-extended:1.7.3")

导航核心部件

在 Android Compose 中，导航是通过 Navigation 库来实现的，它提供了一种声明式的方式来管理页面跳转和页面栈。

Navigation库所包含的核心部件
● NavController：导航控制器，负责管理导航图（NavGraph）和导航栈。它提供了 navigate 方法来跳转到不同的页面，以及 popBackStack 方法来返回上一个页面。
● NavGraph：导航图，定义了应用中的所有导航目标（页面）和它们之间的关系。导航图可以通过 NavHost 来构建。
● NavHost：导航宿主，是一个 Composable 函数，用于构建导航图并显示当前页面。它接受一个 NavController 和一个 startDestination 参数，定义了导航的起点。
● NavDestination：导航目标，表示导航图中的一个页面。在 Compose 中，导航目标通常是一个 Composable 函数。

简单NavHost实现

下面给出了一个基本的NavHost实现方式；
您仅需在MainActivity界面调用此MyApp界面即可，这样整个页面都充满了NavHost，当我们切换路由时，NavHost就会渲染当前路由指向页面，这样子就实现了基本的路由导航功能

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

ViewPager

在Compose1.2.0及以上的库内已经默认植入了该组件库，您可以直接使用；
目前最新版本AndroidStudio生成的material3模板已经植入了该库，无需再次导入任何外部库

众所周知，常见的应用会有一个底部导航栏，通过点击不同的导航按钮从而实现界面的切换，这种场景虽然也类似于路由的切换，但是实际上Navigation库并不参与进去，这里的界面切换实际上仍然是在同一个路由内进行的，只不过由ViewPager库来实现页面滑动渲染的过程而已；
我们引出以下两个术语：

一级导航页面：即使用底部导航栏切换页面
二级及以上导航页面：非一级导航的其他页面，这些页面打开后将完全覆盖一级导航
请注意，使用HorizontalPager时，页面切换后不会保留原页面的状态，除非你使用ViewModel进行状态管理

Pager切换逻辑图阐述

如果上述文字描述不够清晰的话，您可以参考下面的逻辑图
undefined 最外层是NavHost，用于主管所有的路由导航，当前所在的路由是 main
undefined NavHost里层是一个Scaffold视图，这里content就是一个HorizontalPager，还有一个底部导航栏
所以不难得出运行机制如下：

当使用底部导航栏导航时，此时的路由一直处在main下，不会发生任何变化
当点击底部导航栏任意一个按钮时，使得pager发生动态变化
pager变化触发HorizontalPager组件发生UI更新，将切换至对应数值所指向的页面