鸿蒙开发(HarmonyOS)自定义Tabs组件代码解释

最新推荐文章于 2024-08-24 20:09:40 发布

忧郁火龙果

最新推荐文章于 2024-08-24 20:09:40 发布

阅读量699

点赞数 1

文章标签：鸿蒙系统

本文链接：https://blog.csdn.net/LQlove1/article/details/134725094

版权

本文详细解读了如何在鸿蒙系统中使用@Entry,@Component,@State和@Builder等修饰器创建自定义Tabs组件，包括TabsController的使用和TabBuilder函数的声明式设计。

摘要由CSDN通过智能技术生成

鸿蒙开发(HarmonyOS)自定义Tabs组件代码解释

// @Entry @Component @Builder @State都是修饰器
// 被@Entry修饰的文件被标记为入口文件
@Entry
//被@Component修饰的文件被标记为自定义组件
@Component
struct TabsExample {//struct是自定义组件结构体，是可以被复用的UI单元
  // @State装饰器：@State修饰的变量被标记是状态变量，值变化出发UI界面也变化
  @State currentIndex: number = 0;
  // private 访问修饰符将属性或方法标记为私有，
  // 表示它们只能在类的内部被访问，外部无法直接访问。
  // 私有成员通常用于封装一些内部实现细节，不希望外部直接访问

  // 切换指定页签需要使用TabsController，TabsController是Tabs组件的控制器，
  // 用于控制Tabs组件进行页签切换。
  // 通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。
  private tabsController: TabsController = new TabsController();
  // @Builder装饰器：自定义构建函数
  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex);
    })
  }
  // 声明式的方式来描述 UI 的结构，如build() 方法内部的代码块。
  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#00CB87')
      }
      // this.TabBuilder()这样可以使用之前声明好的函数
      .tabBar(this.TabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#007DFF')
      }
      .tabBar(this.TabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))
    }
    .barWidth('100%')
    .barHeight(50)
    .onChange((index: number) => {
      this.currentIndex = index;
    })
  }
}