HarmonyOS 怎么修改tabbar的默认选中界面

HarmonyOS
2024-12-24 15:57:16
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Excelsior_abit

请参考此demo:

@Entry
@Component
struct TabsExample {
  @State currentIndex: number = 2;
  private tabsController: TabsController = new TabsController();

  @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('30%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex);
    })
  }

  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#00CB87')
      }
      .tabBar(this.TabBuilder('页签1', 0, $r('app.media.startIcon'), $r('app.media.startIcon')))

      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#007DFF')
      }
      .tabBar(this.TabBuilder('页签2', 1, $r('app.media.icon'), $r('app.media.icon')))
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#F04B3D')
      }
      .tabBar(this.TabBuilder('页签3', 2, $r('app.media.icon'), $r('app.media.icon')))
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#F04B3D')
      }
      .tabBar(this.TabBuilder('页签4', 3, $r('app.media.icon'), $r('app.media.icon')))
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#FF6C3F')
      }
      .tabBar(this.TabBuilder('页签5', 4, $r('app.media.icon'), $r('app.media.icon')))
    }
    .barWidth('100%')
    .barHeight(50)
    .barMode(BarMode.Scrollable)
    .scrollable(true)
    .backgroundColor('#f2f3f5')
    .onChange((index: number) => {
      this.currentIndex = index;
    })
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
分享
微博
QQ
微信
回复
2024-12-24 17:54:05
相关问题
HarmonyOS 怎么配置tab默认选择tabBar
1027浏览 • 1回复 待解决
修改Button默认样式吗?
1117浏览 • 1回复 待解决
Tab组件Tabbar中字体颜色如何修改
2336浏览 • 1回复 待解决
怎么获取select选中
8475浏览 • 1回复 待解决
HarmonyOS tabstabBar怎么居左
1153浏览 • 1回复 待解决
HarmonyOS 怎么自定义TabTabbar
716浏览 • 1回复 待解决
HarmonyOS 顶部颜色怎么修改
682浏览 • 1回复 待解决