HarmonyOS 需要频道导航栏功能样例

请参考如下示例代码

import { router } from '@kit.ArkUI';
@Entry
@Component
struct AAA {
  build() {
    Column() {
      Stack(){
        Tabs({ barPosition: BarPosition.End, controller: this.controller001 }) {
          TabContent() {
            Column() {
              Text('Tab1')
                .fontSize(36)
                .fontColor('#182431')
                .fontWeight(500)
                .opacity(0.4)
                .margin({ top: 30, bottom: 56.5 })
              Divider()
                .strokeWidth(0.5)
                .color('#182431')
                .opacity(0.05)
            }.width('100%')
          }.tabBar(this.tabBuilder001(0))
          TabContent() {
            Column() {
              Text('Tab2')
                .fontSize(36)
                .fontColor('#182431')
                .fontWeight(500)
                .opacity(0.4)
                .margin({ top: 30, bottom: 56.5 })
              Divider()
                .strokeWidth(0.5)
                .color('#182431')
                .opacity(0.05)
            }.width('100%')
          }.tabBar(this.tabBuilder001(1))
          TabContent() {
            Column() {
              Text('Tab3')
                .fontSize(36)
                .fontColor('#182431')
                .fontWeight(500)
                .opacity(0.4)
                .margin({ top: 30, bottom: 56.5 })
              Divider()
                .strokeWidth(0.5)
                .color('#182431')
                .opacity(0.05)
            }.width('100%')
          }.tabBar(this.tabBuilder001(2))
          TabContent() {
            Column() {
              Text('Tab4')
                .fontSize(36)
                .fontColor('#182431')
                .fontWeight(500)
                .opacity(0.4)
                .margin({ top: 30, bottom: 56.5 })
              Divider()
                .strokeWidth(0.5)
                .color('#182431')
                .opacity(0.05)
            }.width('100%')
          }.tabBar(this.tabBuilder001(3))
        }
        .vertical(false)
        .barHeight(56)
        .onChange((index: number) => {
          this.currentIndex = index
        })
        .width(360)
        .height(190)
        .backgroundColor('#F1F3F5')
        .margin({ top: 38 })
        Image($r("app.media.app_icon"))
          .width('5%')
          .margin({top:180,left:320})
          .onClick(() => {
            console.info("hello")
            router.pushUrl({url:"pages/page2"})
          })
      }
    }.width('100%')
  }
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller001: TabsController = new TabsController()
  @Builder
  tabBuilder001(index: number) {
    Column() {
      Text(`Tab${index + 1}`)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%')
  }
}