鸿蒙arkts如何添加tabbar

 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

  @Entry
  @Component
  struct MainPage {
    @State private selectedIndex: number = 0;
    private controller: TabsController = new TabsController()

    build() {

      Column() {

        Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.White)
          }
          .tabBar({
            icon:$r('app.media.home'),
            text: '首页'
          })

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.White)
          }
          .tabBar({
            icon: $r('app.media.plugin'),
            text: '插件'
          })

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.White)
          }
          .tabBar( {
            icon: $r('app.media.mine'),
            text: '我的'
          })
        }
        .barWidth('100%') // 设置TabBar宽度
        .barHeight(60) // 设置TabBar高度
        .width('100%') // 设置Tabs组件宽度
        .height('100%') // 设置Tabs组件高度
        .backgroundColor(0xffADD8E6) // 设置Tabs组件背景颜色
        .onChange( (index: number) => {
          this.selectedIndex = index;
        }
        )
      }
      .width('100%')
      .height('100%')

    }

    switchTab(type: number) {
      this.controller.changeIndex(3);
    }
  }