ArkTS的Tabs和TabContent（仿微信布局）_arkts tabcontent

说些废话

    官方文档：容器组件-Tabs（基于ArkTS的声明式开发范式）
    图片都是在华为官网的图标矢量库下载的。HarmonyOS主题图标库

概念

    Tabs：通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
    TabContent：仅在Tabs中使用，对应一个切换页签的内容视图。

环境

    DevEco Studio 3.1 Canary1
    SDK 8
    我看的《API参考》更新时间为2022-12-16 17:46

代码

import prompt from '@ohos.prompt';
@Entry
@Component
struct Index {
  //感觉有回弹效果，不知道是不是错觉
  //#63bf02 绿色
  //索引从0开始
  private tabsController: TabsController = new TabsController();
  //选项卡的下标，从0开始，初始为0（表示被选中
  @State index: number = 0
  //自定义消息的tab组件
  @Builder tabMessage(){
    Row(){
      Column(){
        //上填充
        Blank()
        Image(this.index == 0 ? $r('app.media.message_selected') : $r('app.media.message'))
          .size({width: 25, height: 25})
        Text('消息').fontSize(16)
          .fontColor(this.index == 0 ? "#63bf02" : "#000000")
        //下填充
        Blank()
      }
      .height('100%')
      .width('100%')
      .onClick(() => {
        this.index = 0;
        this.tabsController.changeIndex(this.index);
      })
    }
  }
  //自定义通讯录的tab组件
  @Builder tabContactsGroup(){
    Row(){
      Column(){
        //上填充
        Blank()
        Image(this.index == 1 ? $r('app.media.contacts_group_selected') : $r('app.media.contacts_group'))
          .size({width: 25, height: 25})
        Text('通讯录').fontSize(16)
          .fontColor(this.index == 1 ? "#63bf02" : "#000000")
        //下填充
        Blank()
      }
      .height('100%')
      .width('100%')
      .onClick(() => {
        this.index = 1;
        this.tabsController.changeIndex(this.index);
      })
    }
  }
  //自定义发现的tab组件
  @Builder tabDiscover(){
    Row(){
      Column(){
        //上填充
        Blank()
        Image(this.index == 2 ? $r('app.media.discover_selected') : $r('app.media.discover'))
          .size({width: 25, height: 25})
        Text('发现').fontSize(16)
          .fontColor(this.index == 2 ? "#63bf02" : "#000000")
        //下填充
        Blank()
      }
      .height('100%')
      .width('100%')
      .onClick(() => {
        this.index = 2;
        this.tabsController.changeIndex(this.index);
      })
    }
  }
  //自定义发现的tab组件
  @Builder tabMy(){
    Row(){
      Column(){
        //上填充
        Blank()
        Image(this.index == 3 ? $r('app.media.my_selected') : $r('app.media.my'))
          .size({width: 25, height: 25})
        Text('我的').fontSize(16)
          .fontColor(this.index == 3 ? "#63bf02" : "#000000")
        //下填充
        Blank()
      }
      .height('100%')
      .width('100%')
      .onClick(() => {
        this.index = 3;
        this.tabsController.changeIndex(this.index);
      })
    }
  }

  build() {
    Row() {
      Column() {
        Tabs({
          index: 0,
          barPosition: BarPosition.End,
          controller: this.tabsController
        }) {
          //消息的tab绑定
          TabContent(){
            Row() {
              Column() {
                Text('message')
                  .textAlign(TextAlign.Center)
                  .fontSize(20)
                  .width('100%')
              }
              .width('100%')
            }
            .height('100%')
          }
          .tabBar(this.tabMessage())
          //通讯录的tab绑定
          TabContent(){
            Row() {
              Column() {
                Text('contactsGroup')
                  .textAlign(TextAlign.Center)
                  .fontSize(20)
                  .width('100%')
              }
              .width('100%')
            }
            .height('100%')
          }
          .tabBar(this.tabContactsGroup())
          //发现的tab绑定
          TabContent(){
            Row() {
              Column() {
                Text('discover')
                  .textAlign(TextAlign.Center)
                  .fontSize(20)
                  .width('100%')
              }
              .width('100%')
            }
            .height('100%')
          }
          .tabBar(this.tabDiscover())
          //我的的tab绑定
          TabContent(){
            Row() {
              Column() {
                Text('my')
                  .textAlign(TextAlign.Center)
                  .fontSize(20)
                  .width('100%')
              }
              .width('100%')
            }
            .height('100%')
          }
          .tabBar(this.tabMy())
        }
        //如果不准滑动了前后没有回弹，但是切换的时候中间组件还是有回弹的感觉
        .scrollable(true)
        .width('100%')
        .height('100%')
        .barHeight(60)
        //The width of all TabBars is evenly allocated.
        .barMode(BarMode.Fixed)
        //如果用户点了组件，就产生回调
        .onChange((index: number) => {
          this.index = index;
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

展示