HarmonyOS NEXT--音乐项目（1）--Tabs组件使用

3.1.1 界面开发

遵循页面开发先整体后局部的概念，页面首先需要定义下方的tabs组件，定义tabs不同样式。

使用@Builder装饰器构建单个tabBar的样式，通过点击事件，修改当前index值，再根据index，显示不同的tabContent。

// @Preview
@Component
export struct tabBuilder {
  // currentIndex由tabs组件点击tabContent之后，传递过来
  @Link currentIndex:number
  // @State currentIndex: number = 0

  @Builder
  tabBarBuilder(title: string, icon: Resource, index: number) {
    Column() {
      SymbolGlyph(icon).fontSize(24)
        .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), true)
        .fontColor(this.currentIndex === index ? ['#FF1949'] : ['#99000000'])
      Text(title)
        .fontSize(10)
        .fontColor(this.currentIndex === index ? '#FF1949' : '#99000000')
        .margin({ top: 4 })
    }
    .onClick(() => {
      this.currentIndex=index
    })
  }

  build() {
    Row() {
      this.tabBarBuilder('首页', $r('sys.symbol.house_fill'), 0)
      this.tabBarBuilder('我的', $r('sys.symbol.person_crop_circle_fill'), 1)
    }
    .height(48)
    .width('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

• SymbolGlyph是内置的图片组件，用于显示图标小符号。其属性symbolEffect(symbolEffect: SymbolEffect, isActive?: boolean)用于设置SymbolGlyph组件动效策略及播放状态。

小组件的动态效果如下:

3.1.2 在Index首页中调用当前tabs页面