【鸿蒙开发—顺 “瓜” 摸 “藤”】2. 应用的自定义页签导航(仿小红书)

// V1 版代码（基础）@Componentexport 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)      // 将 Tabs 组件自带的页签栏设置为0（即不显示），配合自定义导航栏      .barHeight(0)    }    .width('100%')    .height('100%')  }}

2. 状态管理V2版

// V2 版代码（基础）@ComponentV2export 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)      // 将 Tabs 组件自带的页签栏设置为0（即不显示），配合自定义导航栏      .barHeight(0)    }    .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/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）

// 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'}

视图层的引用