HarmonyOS：设置组件导航

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤博客园地址：为敢技术（https://www.cnblogs.com/strengthen/ ）
➤GitHub地址：https://github.com/strengthen
➤原文地址：https://www.cnblogs.com/strengthen/p/18475745
➤如果链接不是为敢技术的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

一、Navigation组件的使用

1、Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，可以实现路由进行切换。

Navigation组件在页面结构上主要包含两个部分：（1）、首页。（2）、非首页。

这两部分通过路由进行切换，确保用户能够流畅自然地在不同页面之间导航。

2、首页和非首页具体组成部分：左图为Navigation组件的首页，右图为Navigation组件的非首页。

（1）、Navigation组件的首页，包括以下内容：

标题栏：用于标识出整个页面的主题。Navigation支持两种类型的标题栏，也可以通过Navigation的hideTitleBar属性，进行标题栏的隐藏，

菜单栏：支持将一些常用的功能都放入菜单栏，方便用户快捷地使用某些功能。开发者可以通过Navigation的menus属性进行设置。

内容区：主要用于显示一些界面内容以及导航栏，点击导航栏会跳转到该导航栏所对应的内容区，实现页面的切换。

工具栏：位于Navigation首页的底部，可以使用toolbarConfiguration属性进行设置。

在上述内容中，最重要的就是内容区中的导航栏。

（2）、Navigation组件的非首页

标题栏：与首页标题栏目的一致，用于标识整个内容区页面的主题，开发者可以使用NavDestination的title属性，来控制标题栏的显示内容。也可以通过hideTitleBar属性，来控制标题栏是否进行显示。

菜单栏：与首页的功能定义一致，支持将一些常用的功能都放入菜单栏，方便用户快捷地使用某些功能。开发者可以通过Navigation的menus属性进行设置。

内容区：显示当前导航栏对应的内容。

3、Navigation相较于传统的router路由，具有许多优势：

（1）、Navigation天然支持一次开发、多端部署的场景。

（2）、使用Navigation组件时，若设置Navigation组件的mode属性为NavigationMode.Auto，那么当设备的宽度大于520vp时，Navigation组件会采用分栏模式，反之则采用单页面模式。单页面显示模式与分栏模式的Navigation组件的组成时一致的，不一样的只是表现形式。

4、Navigation的每一个组成部分进行具体的讲解：

4.1、标题栏：Navigation支持两种类型的标题栏

（1）、Mini模式：普通标题栏，用于一级页面不需要突出标题的场景。实现方法是，给Navigation组件加上titleMode属性，并配置为NavigationTitleMode.Mini，对应的效果如下图所示：

（2）、Full模式：强调型标题栏，用于一级页面需要突出标题的场景，实现方法是，给Navigation组件加上titleMode属性，配置为NavigationTitleMode.Full，对应的效果如下图所示：可以看到标题进行了突出的显示。

（3）、开发者也可以通过设置Navigation的hideTitleBar为true属性，来进行标题栏的隐藏。

4.2、菜单栏：位于Navigation组件的右上角，不设置时默认不会进行显示，开发者可以通过menus属性进行设置，menus支持Array<NavigationMenuItem>和CustomBuilder两种参数类型。在使用Array<NavigationMenuItem>类型时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。对于NavigationMenuItem的类型，支持配置4个参数：

value参数：表示显示在菜单栏单个选项的文本。

icon参数：表示菜单栏单个选项的图标资源目录。

action参数：当前选项被选中的事件回调函数。

例如此处，创建了两个NavigationMenuItem，分别使用了搜素与添加作为图标，然后使用NavigationMenuItem的menus属性，将配置的NavigationMenuItem组合成数组，作为menus属性的参数。

4.3、工具栏：位于Navigation组件的底部，开发者可以通过toolbarConfiguration属性进行设置。该属性需要传入一个ToolbarItem构成的数组。数组内传入一个value属性，用于标识工具栏单个选项的显示文本，同时可以使用icon配置工具栏选项的图标，用action配置工具栏选项被选中时的回调。

5、模块内页面切换

Navigation组件非常重要的一个部分：页面的跳转以及参数的传递。在使用Navigation组件中，非常重要的一个点就是依靠Navigation组件提供的组件级路由能力，实现更加自然流畅的转场体验，而这就需要依靠路由栈提供的系列方法。下方是push系列方法的相关接口：

（1）、push系列方法：将指定的页面栈数据信息入栈。

主要有四个方法：pushPath、pushPathByName方法1、pushPathByName方法2、pushDestination。

只以其中的pushPathByName方法1为例进行讲解。其他push方法，开发者可以通过自行查阅官方文档进行学习。pushPathByName有三个参数：

参数1：页面名称。

参数2：页面参数，即需要传递的参数。

参数3：是否启用页面切换动画，默认设置为true。即默认启用页面切换动画。

如下图，使用pushPathByName方法，push了一个名为Page5的页面，并传递了一个param5的参数。

（2）、replace系列方法：将当前页面栈栈顶退出，再将指定的NavDestination页面信息对应的数据进行入栈操作。

主要有两个方法：replacePath、replacePathByName

此处只介绍replacePathByName方法。replacePathByName有三个参数：

参数1：页面名称。

参数2：页面参数，即需要传递的参数。

参数3：是否启用页面切换动画，默认设置为true。即默认启用页面切换动画。

如下图，使用replacePathByName方法，将原本的栈顶的Page5页进行了替换，变成了Page1页面。

6、路由传参与路由参数获取。

路由参数的获取主要有以下两种方式：

（1）、使用索引值。对应的接口为：getParamByIndex方法，该方法需要传递一个number类型的索引值，通过该方法就可以获取到索引对应的NavDestination页面参数信息。如下图：获取索引为0的数据为param1，获取索引为1处的数据为param2。

（2）、使用页面名称。对应的接口为：getParamByName方法，该方法需要传递一个string类型的页面名称，会返回该页面名称对应的参数信息。由于同一个页面可能被多次入栈，所以返回值是按照索引，从小到大构成的参数数组。如下图，将Page1作为参数时，会返回数组：[param1，param5]，将Page2作为参数时，返回param2构成的数组。

二、Tabs组件的使用

1、Tab组件

2、Tabs组件的使用：界面结构

底部导航：只需设置Tabs的barPosition为End。

顶部导航：只需设置Tabs的barPosition为Start。

侧边导航：不仅需要设置Tabs的barPosition为Start，还需要设置vertical属性为true。

其中，barPosition参数用于设置Tabs的页签位置。vertical属性用于设置是否为纵向Tab。

3、Tabs组件的使用：controller

Tabs参数中所传入的TabsController实例可以对Tabs显示的TabContent区域进行控制，控制方式是使用实例的changeIndex方法，该方法需要传入一个数值，能控制Tabs显示到对应的索引。为了进行控制Tabs的操作，首先需要将该controller的实例与Tabs组件进行关联，具体的关联方法，是将该实例作为Tabs组件参数的一部分进行传递。关联完成后，可以通过该实例的changeIndex方法，控制TabContent的显示内容。如下图，会控制显示1号索引对应的内容。