IT评测·应用市场-qidao123.com技术社区

标题: HarmonyOS中实现TabBar（相称于Android中的TabLayout+ViewPager） [打印本页]

---

作者: 小秦哥    时间: 2025-1-11 06:22
标题: HarmonyOS中实现TabBar（相称于Android中的TabLayout+ViewPager）
 参考网址：自定义页签切换联动
1.自定义组件TabBarView

2. @Component
3. export struct TabBarView{
4.   @State currentIndex: number = 0
5.   @State selectedIndex: number = 0
6.   private controller: TabsController = new TabsController()
8.   //tab标签内容+横线布局
9.   @Builder tabBuilder(index: number, name: string) {
10.     Column() {
11.       Text(name)
12.         .fontColor(this.selectedIndex === index ? '#007DFF' : '#182431')
13.         .fontSize(18)
14.         .fontWeight(this.selectedIndex === index ? 500 : 400)
15.         .lineHeight(22)
16.         .height('95%')
17.       Divider()
18.         .strokeWidth(2)
19.         .color('#007DFF')
20.         .opacity(this.selectedIndex === index ? 1 : 0)
21.     }
22.     .backgroundColor(Color.White)
23.     .width('100%')
24.     .height('100%')
25.   }
27.   @Link arr: Array<string>
28.   @Builder tabItem(item: string) {}
29.   @BuilderParam item: (item: string) => void = this.tabItem
31.   build() {
32.     Column() {
33.       Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
34.         ForEach(this.arr, (item: string, index: number) => {
35.           TabContent() {
36.             this.item(item)
37.           }.tabBar(this.tabBuilder(index, item))
38.         }, (item: string, index: number) => index.toString())
39.       }
40.       .vertical(false)
41.       .barMode(BarMode.Fixed)
42.       .barWidth(360)
43.       .barHeight(56)
44.       .animationDuration(400)
45.       .onChange((index: number) => {
46.         // currentIndex控制TabContent显示页签
47.         this.currentIndex = index
48.         this.selectedIndex = index
49.       })
50.       .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
51.         if (index === targetIndex) {
52.           return
53.         }
54.         // selectedIndex控制自定义TabBar内Image和Text颜色切换
55.         this.selectedIndex = targetIndex
56.       })
57.       .width('100%')
58.       .height('100%')
59.       .backgroundColor('#F1F3F5')
60.     }.width('100%')
61.   }
62. }

复制代码

2.组件中使用

1. import { TabBarView } from "./TabBarView"
2. @Entry({routeName: 'IndexPage'})
4. @Component
5. export struct IndexPage{
7.   @State arr: Array<string> = ['标签1', '标签2']
8.   @Builder
9.   tabItem(item: string){
10.     //在此处写各个标签对于的布局组件，可抽离出来使代码简洁
11.     if (item === this.arr[0]){
12.       //标签1组件
13.     }else if (item === this.arr[1]){
14.       //标签2组件
15.     }
16.   }
17.   build() {
18.     Column(){
19.       TabBarView({arr: this.arr, item: this.tabItem})
20.     }
21.   }
22. }

复制代码

说明：我是根据官网提供的Tabs实例代码1（自定义页签切换联动）封装的简单使用（代码可直接使用），这种方式是为了复用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4