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

原创

已于 2025-02-04 20:29:30 修改 · 1.8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#Android #Compose #Navigation #Kotlin #Jetpack #路由导航 #ViewPager

于 2025-01-27 15:58:23 首次发布

资源获取方式

关注公众号ZhillerDev，后台发送 android001 就可以获取项目源码及资料啦~
感谢您关注wx公众号，个人将快马加鞭为大家提供更优质的文章与资源！
点击前往微信观看本文章

文章目录

前言

文章总索引：点击前往

在当今的移动应用开发中，导航是用户与应用交互的核心环节。随着 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) }
    }
}