harmonyos 华为 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

@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%')

}

}

展示

参考文章