顺 “瓜” 摸 “藤”（鸿蒙开发）—— 2. 应用的自定义页签导航（仿小红书📕）
1. 引子
我们在开发时，会有突发奇想或者看到好的设计，希望能够模仿，但是会有处于毫无头绪的时候，不知道该如何下手，这就相当于一个考试，给你一个题目叫你作答，但不同于校园考试，他并不是在给定你范围并且复习的情况下进行作答。它是未知的，并不是顺藤摸瓜，总会遇到你所不清楚的内容，我希望能够通过案例顺瓜摸藤进行学习，通过“瓜”来推出是什么“藤”。
2. 注
这些案例都是现有APP的形式进行推论，因本人能力有限，可能不会是最优方案，如果您有更优方案，欢迎指出并讨论。
该系列的代码全部开源
在github
https://github.com/JinnyWang-Space/HMOS_Space
或者gitee
https://gitee.com/jinnywang/HMOS_Space
上均可查看，下载使用
3. 案例
应用的自定义页签导航（底部页签）
自定义页签导航只是底部页签导航的一种，后续会持续更新其他类型页签导航，以其他APP为案例。
视频加载中...
小📕
案例分析
1. 应用的底部每个页签对应一个视图，但其中一个页签并没有对应视图，而是呼出一个自定义弹窗。
2. 每个页签视图之间不可通过滑动切换。
注意，这个中间按钮并不会重置当前显示的页签视图，而是基于当前视图上显示。
4. 知识点
4.1 Tabs （页签视图）
文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-tabs
4.2 TabContent （页签对应的内容视图）
文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-tabcontent
4.3 Foreach （循环渲染）
文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-rendering-control-foreach
4.4 Stack （层叠布局）
文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-stack-layout
4.5 语法糖 （!!——数据双向绑定）
文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-new-binding
4.6 自定义构建函数 （@Builder）
文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-builder
4.7 @ohos.promptAction (弹窗)
4.8 expandSafeArea（拓展安全区）
5. 代码（基础）
5.1 状态管理V1版
1@Component
2export struct TabsRedBookV1Base {
3 // TabBar 栏名称
4 @State tabsName: string[] = ['首页', '市集', '', '消息', '我'];
5 // 当前页签对应的索引值
6 @State tabSelectedIndex: number = 0;
7 // Tabs 控制器
8 private tabsController: TabsController = new TabsController();
9
10 // TabBar 栏
11 @Builder
12 tabBuilder() {
13 Row() {
14 // 循环渲染5.2 状态管理V2版
1@ComponentV2
2export struct TabsRedBookV2Base {
3 // TabBar 栏名称
4 @Local tabsName: string[] = ['首页', '市集', '', '消息', '我'];
5 // 当前页签对应的索引值
6 @Local tabSelectedIndex: number = 0;
7 // Tabs 控制器
8 private tabsController: TabsController = new TabsController();
9
10 // TabBar 栏
11 @Builder
12 tabBuilder() {
13 Row() {
14 // 循环渲染6. 代码（进阶）
采用 MVVM模式 思想，将其 数据 与 视图 独立出来，降低耦合，在Model层 负责数据结构的定义 在ViewModel层 管理UI状态与业务逻辑 ，鸿蒙的装饰器对于这种思想有着天然的优势。
对于页签栏，我们可以发现，其中每个页签其实类型（除了添加按钮）相同，因此我们可以将其封装为类，负责其数据结构定义，这就是Model层。
对于页签栏其中的数据，我们希望单独管理数据，不要在视图层中进行更改，有利于维护以及后续的更改，只改数据，视图就会自动更新，这就是我们为什么要引入ViewModel层。我们封装为类，进行数据管理，在其中可以创建方法来实现我们的目的。
注
·对于刚入门，进阶模式可能会比较抽象，可以先通过 注 里面的提示进行知识补充或者暂时只了解基础版代码，但 注 里面的内容最终是一定要掌握的
·如果为入门，需先了解什么是 MVVM模式，关于什么是MVVM模式请查看这篇文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-mvvm#mvvm%E6%A8%A1%E5%BC%8F%E4%BB%8B%E7%BB%8D
·我们在颜色定义上运用了枚举，对于刚入门，需先了解什么是 枚举类型，关于什么是枚举类型请查看文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/introduction-to-arkts#%E7%B1%BB%E5%9E%8B
枚举类型是类型中的一个，需要手动去翻进行查看
·如果需要UI占满全屏，因为刚入门开发的人会发现开发时预览图会出现 设备的上部分与下部分会出现空白 ，这就需要引入 拓展安全区 的概念，关于安全区在 4. 知识点中有链接
·最重要的，关于状态管理V1与V2版的使用，对于还未开发任何应用的人，这里我更倾向于使用V2版本，因为它相比于V1版，更加强大，使用更加方便，也是华为官方更推荐的，对于想了解V1与V2具体差别的查看这篇文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-v1-v2-update-difference
6.1 封装为Model层（TabsModel）
1export class TabsModel {
2 id: number;
3 title?: string;
4
5 constructor(id: number, title: string | undefined) {
6 this.id = id;
7 this.title = title;
8 }
9}6.2 封装为ViewModel层（TabsViewModel）
ViewModel层正如我们在之前所说，用于进行数据管理，我们所有的数据都在其中，除了页签中的数据，我们发现其颜色也是统一的，因此我们创建一个枚举类型TabsColor用于存储 我们的颜色。
1import { TabsModel } from "../model/TabsModel";
2
3// Tabs组件数据
4export class TabsViewModel {
5 private tabsViewModel: TabsModel[] = [
6 new TabsModel(0, '首页'),
7 new TabsModel(1, '市集'),
8 new TabsModel(2, undefined),
9 new TabsModel(3, '消息'),
10 new TabsModel(4, '我')
11 ];
12
13 // 获取数据
14 getTabs(): TabsModel[] {视图层的引用
6.2.1 状态管理V1版
1import { promptAction } from "@kit.ArkUI";
2import { TabsModel } from "../model/TabsModel";
3import { TabsColor, TabsViewModel } from "../viewmodel/TabsViewModel";
4
5@Component
6export struct TabsRedBookV1High {
7 // 创建 Tabs 容器实例
8 @State tabsVM: TabsModel[] = new TabsViewModel().getTabs();
9 // 当前页签对应的索引值
10 @State tabSelectedIndex: number = 0;
11 // Tabs 控制器
12 private tabsController: TabsController = new TabsController();
13
14 // TabBar 栏6.2.2 状态管理V2版
1import { promptAction } from "@kit.ArkUI";
2import { TabsModel } from "../model/TabsModel";
3import { TabsColor, TabsViewModel } from "../viewmodel/TabsViewModel";
4
5@ComponentV2
6export struct TabsRedBookV2High {
7 // 创建 Tabs 容器实例
8 @Local tabsVM: TabsModel[] = new TabsViewModel().getTabs();
9 // 当前页签对应的索引值
10 @Local tabSelectedIndex: number = 0;
11 // Tabs 控制器
12 private tabsController: TabsController = new TabsController();
13
14 // TabBar 栏7. 实现效果
视频加载中...
实现效果
实现效果
1. 除去中间按钮，其余每个页签都有唯一对应的视图，中间按钮则是呼出一个弹窗
2. 每个页签视图之间不可通过滑动切换。
🎉 恭喜你！完成鸿蒙开发案例中的应用的自定义页签导航