【鸿蒙开发—顺 “瓜” 摸 “藤”】2. 应用的自定义页签导航（小红薯案例版）
本文以“顺瓜摸藤”的逆向学习思路，以小📕案例分享鸿蒙应用的自定义页签导航。详细展现了利用哪些原理，如：Tabs、TabContent、Stack等的原理。文章提供了基础的状态管理代码示例，并进一步展示了如何遵循MVVM模式进行进阶封装，将业务逻辑与视图分离，以提升代码的可维护性与复用性，同时对比说明了状态管理V1与V2版本的使用差异。
1. 引子
我们在开发时，会有突发奇想或者看到好的设计，希望能够模仿，但是会有处于毫无头绪的时候，不知道该如何下手，这就相当于一个考试，给你一个题目叫你作答，但不同于校园考试，他并不是在给定你范围并且复习的情况下进行作答。它是未知的，并不是顺藤摸瓜，总会遇到你所不清楚的内容，我希望能够通过案例顺瓜摸藤进行学习，通过“瓜”来推出是什么“藤”。
2. 注
这些案例都是现有APP的形式进行推论，因本人能力有限，可能不会是最优方案，如果您有更优方案，欢迎指出并讨论。
每个案例的代码都分为状态管理V1版与V2版，并且分别为两个版本再分为基础版与进阶版。
入门可以看基础版，进阶版思想会有些抽象；有些基础的建议直接看V2的进阶版。
对于学生：
计算机类的学生，一般在大一会学习编程语言，理解能力强（学习编程语言是否吃力 / 编程语言的成绩＞80） 的大一的寒假就可以进行该案例学习，无论是基础版还是进阶版，难点最主要在于组件，各种属性的理解与使用 ，并且状态管理直接使用V2版本，V1版本作为了解就行 ，大部分的学生可能需要到大二才能进行学习
该系列的代码全部开源
-
在github JinnyWang-Space/HMOS_Space
https://github.com/JinnyWang-Space/HMOS_Space或者gitee https://gitee.com/jinnywang/HMOS_Spacehttps://gitee.com/jinnywang/HMOS_Space上均可查看，下载使用 -
文章在个人网站 https://www.jinnyspace.online
https://www.jinnyspace.online/ 查看
3. 案例
应用的底部页签导航（自定义页签导航）
自定义页签导航只是底部页签导航的一种，后续会持续更新其他类型页签导航，以其他APP为案例。
以小红书为例
通过案例可以看出：
-
应用的底部每个页签对应一个视图，但其中一个页签并没有对应视图，而是其他功能，选中页签后样式会有变化。
-
各个页签对应的视图不可滑动切换，只能通过点击页签进行切换
4. 知识点
4.1 Tabs（页签视图）
4.2 TabContent（页签对应的内容视图）
4.3 Foreach（循环渲染）
4.4 Stack（层叠布局）
4.5 语法糖（!!—数据双向绑定）
4.6 自定义构建函数（@Builder）
4.7 @ohos.promptAction (弹窗)
4.8 expandSafeArea（拓展安全区）
5. 代码（基础）
5.1 状态管理V1版
// V1 版代码（基础）
@Component
export struct TabsRedBookV1Base {
// TabBar 栏名称
@State tabsName: string[] = ['首页', '市集', '', '消息', '我'];
// 当前页签对应的索引值
@State tabSelectedIndex: number = 0;
// Tabs 控制器
private tabsController: TabsController = new TabsController();
// TabBar 栏
@Builder
tabBuilder() {
Row() {
// 循环渲染
ForEach(this.tabsName, (item: string, index: number) => {
Column() {
// TabBar标题
if (item !== '') {
Text(item)
.width('100%')
.layoutWeight(1)
.textAlign(TextAlign.Center)
// .fontColor(this.tabSelectedIndex === index ? TabsColor.selectedFontColor : TabsColor.fontColor)
.fontColor(this.tabSelectedIndex === index ? '#DADADA' : '#6C6C6E')
.onClick(() => {
// 更新页签对应的索引值
this.tabSelectedIndex = index;
// 控制 Tabs 容器切换到指定页签
this.tabsController.changeIndex(index);
})
}
// 中间的添加按钮
else {
SymbolGlyph($r('sys.symbol.plus'))
.fontSize(20)
.fontColor([Color.White])
.fontWeight(FontWeight.Bolder)
.borderRadius(8)
.padding({
top: 8,
bottom: 8,
left: 12,
right: 12
})
// .backgroundColor(TabsColor.addButtonColor)
.backgroundColor('#FF2742')
.onClick(() => {
promptAction.openToast({ message: '发布' });
})
}
}
.layoutWeight(1)
.height(44)
.justifyContent(FlexAlign.Center)
}, (item: string) => JSON.stringify(item))
}
.width('100%')
// .backgroundColor(TabsColor.barColor)
.backgroundColor('#1A191E')
.position({ bottom: 0 })
.zIndex(1)
// 拓展安全区
.expandSafeArea([SafeAreaType.SYSTEM])
}
build() {
Stack({ alignContent: Alignment.Bottom }) {
// TabBar栏
this.tabBuilder();
// Tab容器
Tabs({ barPosition: BarPosition.End, controller: this.tabsController, index: this.tabSelectedIndex!! }) {
// 循环渲染
ForEach(this.tabsName, (item: string) => {
TabContent() {
Text(item)
.fontSize(24)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
}
}, (item: string) => JSON.stringify(item))
}
// 控制页签视图滑动
.scrollable(false)
}
.width('100%')
.height('100%')
}
}5.2 状态管理V2版
// V2 版代码（基础）
@ComponentV2
export struct TabsRedBookV2Base {
// TabBar 栏名称
@Local tabsName: string[] = ['首页', '市集', '', '消息', '我'];
// 当前页签对应的索引值
@Local tabSelectedIndex: number = 0;
// Tabs 控制器
private tabsController: TabsController = new TabsController();
// TabBar 栏
@Builder
tabBuilder() {
Row() {
// 循环渲染
ForEach(this.tabsName, (item: string, index: number) => {
Column() {
// TabBar标题
if (item !== '') {
Text(item)
.width('100%')
.layoutWeight(1)
.textAlign(TextAlign.Center)
// .fontColor(this.tabSelectedIndex === index ? TabsColor.selectedFontColor : TabsColor.fontColor)
.fontColor(this.tabSelectedIndex === index ? '#DADADA' : '#6C6C6E')
.onClick(() => {
// 更新页签对应的索引值
this.tabSelectedIndex = index;
// 控制 Tabs 容器切换到指定页签
this.tabsController.changeIndex(index);
})
}
// 中间的添加按钮
else {
SymbolGlyph($r('sys.symbol.plus'))
.fontSize(20)
.fontColor([Color.White])
.fontWeight(FontWeight.Bolder)
.borderRadius(8)
.padding({
top: 8,
bottom: 8,
left: 12,
right: 12
})
// .backgroundColor(TabsColor.addButtonColor)
.backgroundColor('#FF2742')
.onClick(() => {
promptAction.openToast({ message: '发布' });
})
}
}
.layoutWeight(1)
.height(44)
.justifyContent(FlexAlign.Center)
}, (item: string) => JSON.stringify(item))
}
.width('100%')
// .backgroundColor(TabsColor.barColor)
.backgroundColor('#1A191E')
.position({ bottom: 0 })
.zIndex(1)
// 拓展安全区
.expandSafeArea([SafeAreaType.SYSTEM])
}
build() {
Stack({ alignContent: Alignment.Bottom }) {
// TabBar栏
this.tabBuilder();
// Tab容器
Tabs({ barPosition: BarPosition.End, controller: this.tabsController, index: this.tabSelectedIndex!! }) {
// 循环渲染
ForEach(this.tabsName, (item: string) => {
TabContent() {
Text(item)
.fontSize(24)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
}
}, (item: string) => JSON.stringify(item))
}
// 控制页签视图滑动
.scrollable(false)
}
.width('100%')
.height('100%')
}
}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/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
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
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-v1-v2-update-difference
6.1 封装Model层（TabsModel）
// Tabs组件数据模型
export class TabsModel {
id: number;
title?: string;
constructor(id: number, title: string | undefined) {
this.id = id;
this.title = title;
}
}6.2 封装ViewModel层（TabsViewModel）
ViewModel层正如我们在之前所说，用于进行数据管理，我们所有的数据都在其中，除了页签中的数据，我们发现其颜色也是统一的，因此我们创建一个枚举类型TabsColor用于存储我们的颜色。
import { TabsModel } from "../model/TabsModel";
// Tabs组件数据
export class TabsViewModel {
private tabsViewModel: TabsModel[] = [
new TabsModel(0, '首页'),
new TabsModel(1, '市集'),
new TabsModel(2, undefined),
new TabsModel(3, '消息'),
new TabsModel(4, '我')
];
// 获取数据
getTabs(): TabsModel[] {
// [...array]，防御性编程，防止内部数据被外部修改
return [...this.tabsViewModel];
}
}
// Tabs组件中的颜色枚举
export enum TabsColor {
// TabBar栏背景颜色
barColor = '#1A191E',
// TabBar栏字体默认颜色
fontColor = '#6C6C6E',
// TabBar栏选中字体颜色
selectedFontColor = '#DADADA',
// TabBar栏添加按钮颜色
addButtonColor = '#FF2742'
}视图层的引用
6.2.1 状态管理V1版
import { promptAction } from "@kit.ArkUI";
import { TabsModel } from "../model/TabsModel";
import { TabsColor, TabsViewModel } from "../viewmodel/TabsViewModel";
// V1 版代码（进阶）
@Component
export struct TabsRedBookV1High {
// 创建 Tabs 容器实例
@State tabsVM: TabsModel[] = new TabsViewModel().getTabs();
// 当前页签对应的索引值
@State tabSelectedIndex: number = 0;
// Tabs 控制器
private tabsController: TabsController = new TabsController();
// TabBar 栏
@Builder
tabBuilder() {
Row() {
// 循环渲染
ForEach(this.tabsVM, (item: TabsModel) => {
Column() {
// TabBar标题
if (item.title) {
Text(item.title)
.width('100%')
.layoutWeight(1)
.textAlign(TextAlign.Center)
.fontColor(this.tabSelectedIndex === item.id ? TabsColor.selectedFontColor : TabsColor.fontColor)
.onClick(() => {
// 更新页签对应的索引值
this.tabSelectedIndex = item.id;
// 控制 Tabs 容器切换到指定页签
this.tabsController.changeIndex(item.id);
})
}
// 中间的添加按钮
else {
SymbolGlyph($r('sys.symbol.plus'))
.fontSize(20)
.fontColor([Color.White])
.fontWeight(FontWeight.Bolder)
.borderRadius(8)
.padding({
top: 8,
bottom: 8,
left: 12,
right: 12
})
.backgroundColor(TabsColor.addButtonColor)
.onClick(() => {
promptAction.openToast({ message: '发布' });
})
}
}
.layoutWeight(1)
.height(44)
.justifyContent(FlexAlign.Center)
}, (item: TabsModel) => JSON.stringify(item))
}
.width('100%')
.backgroundColor(TabsColor.barColor)
.position({ bottom: 0 })
.zIndex(1)
// 拓展安全区
.expandSafeArea([SafeAreaType.SYSTEM])
}
build() {
Stack({ alignContent: Alignment.Bottom }) {
// TabBar栏
this.tabBuilder();
// Tab容器
Tabs({ barPosition: BarPosition.End, controller: this.tabsController, index: this.tabSelectedIndex!! }) {
// 循环渲染
ForEach(this.tabsVM, (item: TabsModel) => {
TabContent() {
Text(item.title)
.fontSize(24)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
}
}, (item: TabsModel) => JSON.stringify(item))
}
// 控制页签视图滑动
.scrollable(false)
}
.width('100%')
.height('100%')
}
}6.2.2 状态管理V2版
import { promptAction } from "@kit.ArkUI";
import { TabsModel } from "../model/TabsModel";
import { TabsColor, TabsViewModel } from "../viewmodel/TabsViewModel";
// V2 版代码（进阶）
@ComponentV2
export struct TabsRedBookV2High {
// 创建 Tabs 容器实例
@Local tabsVM: TabsModel[] = new TabsViewModel().getTabs();
// 当前页签对应的索引值
@Local tabSelectedIndex: number = 0;
// Tabs 控制器
private tabsController: TabsController = new TabsController();
// TabBar 栏
@Builder
tabBuilder() {
Row() {
// 循环渲染
ForEach(this.tabsVM, (item: TabsModel) => {
Column() {
// TabBar标题
if (item.title) {
Text(item.title)
.width('100%')
.layoutWeight(1)
.textAlign(TextAlign.Center)
.fontColor(this.tabSelectedIndex === item.id ? TabsColor.selectedFontColor : TabsColor.fontColor)
.onClick(() => {
// 更新页签对应的索引值
this.tabSelectedIndex = item.id;
// 控制 Tabs 容器切换到指定页签
this.tabsController.changeIndex(item.id);
})
}
// 中间的添加按钮
else {
SymbolGlyph($r('sys.symbol.plus'))
.fontSize(20)
.fontColor([Color.White])
.fontWeight(FontWeight.Bolder)
.borderRadius(8)
.padding({
top: 8,
bottom: 8,
left: 12,
right: 12
})
.backgroundColor(TabsColor.addButtonColor)
.onClick(() => {
promptAction.openToast({ message: '发布' });
})
}
}
.layoutWeight(1)
.height(44)
.justifyContent(FlexAlign.Center)
}, (item: TabsModel) => JSON.stringify(item))
}
.width('100%')
.backgroundColor(TabsColor.barColor)
.position({ bottom: 0 })
.zIndex(1)
// 拓展安全区
.expandSafeArea([SafeAreaType.SYSTEM])
}
build() {
Stack({ alignContent: Alignment.Bottom }) {
// TabBar栏
this.tabBuilder();
// Tab容器
Tabs({ barPosition: BarPosition.End, controller: this.tabsController, index: this.tabSelectedIndex!! }) {
// 循环渲染
ForEach(this.tabsVM, (item: TabsModel) => {
TabContent() {
Text(item.title)
.fontSize(24)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
}
}, (item: TabsModel) => JSON.stringify(item))
}
// 控制页签视图滑动
.scrollable(false)
}
.width('100%')
.height('100%')
}
}
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
9
0- 0
已为社区贡献2条内容
所有评论(0)