Jetpack：018-Jetpack中的导航一

news2024/11/17 19:36:51

文章目录

1. 概念介绍
2. 使用方法
- 2.1 基本概念
- 2.2 传统用法
- 2.3 新的用法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了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函数的参数就是导航图中的路由信息，通常用一个字符串表示。