Jetpack:018-Jetpack中的导航一

本文详细介绍了Jetpack库中的Navigation功能,包括基本概念(NavDestination、NavigationGraph、NavController和NavHost),并展示了在Compose中使用的新方法,以及示例代码。重点在于如何在compose组件间实现页面导航和堆栈管理。


我们在上一章回中介绍了Jetpack库中对话框相关的内容,本章回中主要介绍 导航。闲话休提,让我们一起Talk Android Jetpack吧!

1. 概念介绍

我们在这里介绍的导航是指页面之间的跳转,早期的页面都是基于Activity进行开发,页面之间的跳转也就是Activity之间的跳转。后来推出了Fragment,它也可以承载一部分页面,不过Fragment之间的跳转不方便,只能是基于同一个Fragment容器内的Fragment进行切换,常见的是底部导航栏,每个导航栏对应一个Fragment,点击导航栏时开始页面切换。还有一种方法就是在Activity中嵌套Fragment,通过切换Activity来实现Fragment的跳转,不过在本质上仍然是Activity之间的跳转。

后来Google推出了Jetpack库,该库提供了Navigation来实现导航,Navigation可以解决Fragment之间跳转的难题,本章回中将详细介绍它的使用方法。

2. 使用方法

2.1 基本概念

我们先介绍一下Navigation库中基本的概念,这些概念会贯穿整个导航知识,是导航系列知识中必备的内容:

  • NavDestination也叫导航目的地:主要用来表示导航的目标,它本质上是一个页面;
  • Navigaiton Graph也叫导航图:它包含整个程序中所有导航线路;
  • NavController也就导航控制器:它要用来实现页面的跳转;
  • NavHost也叫导航容器:它是所有页面和导航控制器的载体(容器);

明白这些基本概念后,我们综合使用它们:在实际项目中每个页面都可以看作是导航目的地,所有的页面都要添加到导航容器中,所有页面之间的跳转关系组成了导航图,导航容器通过导航控制器实现导航,导航的会按照导航图中的内容进行导航,这便是导航运行的原理。下面是官方文档中的一个导航示意图,请大家参考。

在这里插入图片描述

2.2 传统用法

这里说的传统用法是指使用Activity和Fragment进行页面设计,并且页面的布局通过xml文件实现。传统用法会在页面的布局文件中(xml文件)添加导航信息,通过这些导航信息建立统一的导航图,然后导航控制器就通过导航图实现各个页面之间的导航。这里提到的导航图可以通过代码实现(xml代码)或者通过可视化编辑器编辑。我没有使用这种方法进行导航,因此不会介绍这种传统用法,比较compse中已经不再使用这种传统用法了,如果有看官想使用这种方法实现导航,可以参考官方文档

2.3 新的用法

我们在这里说的新用法是在compose组成的页面中使用导航。下面是详细的使用步骤和方法:

  • 在导航容器中创建导航图,主要包含导航路由和导航目的地;
  • 获取导航控制器,通过导航控制器的navigate()方法和路由实现导航;
  • 通过popup方法沿着原来的路由原路返回;

导航图本质上是一个堆栈,当前显示的页面位于堆栈顶部,导航控制器主要对页面进行入栈和出栈操作,进而实现导航效果;

3. 示例代码

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "home" ) {

        //程序主页
        composable("home") {
            MainFramework(navController)
        }

       
        composable(ScreenData.screeList[0].route) {
            LayoutPage()
        }

        composable(ScreenData.screeList[1].route) {
            KindsOfText()
        }
        composable(ScreenData.screeList[2].route) {
            ExButton()
        }
        composable(ScreenData.screeList[3].route) {
            ExProgress()
        }
        composable(ScreenData.screeList[4].route) {
            ExScaffold()
        }
    }
}

上面的示例代码中,位于composable函数中的其它函数都可以看作是导航目的地,它们表示具体的页面,比如ExButton()表示按钮相关的页面。NaHost就是导航容器,它可以控制导航控制器(navController).composable函数的参数就是导航图中的路由信息,通常用一个字符串表示。

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • 导航表示程序中各个页面之间的跳转关系;
  • 导航包含四个基本概念:导航目的地,导航图,导航容器和导航控制器;
  • 导航通过Navigation库实现,它可实现传统的Activity导航也可以实现compose可组合函数之间的导航;

看官们,与Jetpack中导航相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

如何 在应用模块的 build.gradle.kts 中配置 Compose Compiler。plugins { id("com.android.application") id("org.jetbrains.kotlin.android") // 添加 Kotlin 注解处理插件(如需要) id("kotlin-kapt") } android { namespace = "com.example.memoapp" compileSdk = 34 defaultConfig { applicationId = "com.example.memoapp" minSdk = 24 targetSdk = 34 versionCode = 1 versionName = "1.0" // 添加矢量图支持(Compose 需要) vectorDrawables { useSupportLibrary = true } } buildTypes { release { isMinifyEnabled = false proguardFiles( getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro" ) } } compileOptions { sourceCompatibility = JavaVersion.VERSION_11 targetCompatibility = JavaVersion.VERSION_11 } kotlinOptions { jvmTarget = "11" } buildFeatures { viewBinding = true // 添加 Compose 支持 compose = true } // 添加 Compose 选项 composeOptions { // 设置与 Kotlin 版本兼容的 Compose 编译器版本 kotlinCompilerExtensionVersion = "1.5.4" // 与 Kotlin 1.9.10 兼容 } // 添加打包选项(避免 Compose 相关警告) packaging { resources { excludes += "/META-INF/{AL2.0,LGPL2.1}" } } } dependencies { // 现有依赖 implementation("androidx.core:core-ktx:1.12.0") implementation("androidx.appcompat:appcompat:1.6.1") implementation("com.google.android.material:material:1.11.0") implementation("androidx.constraintlayout:constraintlayout:2.1.4") implementation("androidx.recyclerview:recyclerview:1.3.2") // ================ 添加 Compose 相关依赖 ================ // Compose BOM (Bill of Materials) 统管理版本 val composeBom = platform("androidx.compose:compose-bom:2023.10.01") implementation(composeBom) // 基础 Compose 依赖 implementation("androidx.compose.ui:ui") implementation("androidx.compose.ui:ui-graphics") // 包含 Color 类 implementation("androidx.compose.ui:ui-tooling-preview") implementation("androidx.compose.material3:material3") // Activity 集成 implementation("androidx.activity:activity-compose:1.8.0") // ViewModel 集成(如需要状态管理) implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.2") // 导航组件(如需要) implementation("androidx.navigation:navigation-compose:2.7.5") // 图标扩展 implementation("androidx.compose.material:material-icons-core") implementation("androidx.compose.material:material-icons-extended") // 调试工具 debugImplementation("androidx.compose.ui:ui-tooling") debugImplementation("androidx.compose.ui:ui-test-manifest") // ================ 可选:其他有用依赖 ================ // Coil 图片加载库(Compose 兼容) implementation("io.coil-kt:coil-compose:2.4.0") // 系统 UI 控制器(状态栏/导航栏颜色) implementation("com.google.accompanist:accompanist-systemuicontroller:0.31.5-beta") }
11-20
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值