> 文档中心 > ArkTS的Tabs和TabContent(仿微信布局)

ArkTS的Tabs和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@Componentstruct 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