HarmonyOS ArkTS Tab使用方法（十五）

一，使用方法

Android中Java代码使用fragment进行Tab切换，下面使用HarmonyOS ArkTS 语言实现Tab的使用，代码如下：

/** Copyright (c) 2022 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import CommonConstants from '../common/constants/CommonConstants';
import Home from "../view/Home"
import Setting from "../view/Setting"/*** Main page*/
@Entry
@Component
struct MainPage {@State currentIndex: number = CommonConstants.HOME_TAB_INDEX;private tabsController: TabsController = new TabsController();@Builder TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {Column() {Image(this.currentIndex === index ? selectedImg : normalImg).width($r('app.float.mainPage_baseTab_size')).height($r('app.float.mainPage_baseTab_size'))Text(title).margin({ top: $r('app.float.mainPage_baseTab_top') }).fontSize($r('app.float.main_tab_fontSize')).fontColor(this.currentIndex === index ? $r('app.color.mainPage_selected') : $r('app.color.mainPage_normal'))}.justifyContent(FlexAlign.Center).height($r('app.float.mainPage_barHeight')).width(CommonConstants.FULL_PARENT).onClick(() => {this.currentIndex = index;this.tabsController.changeIndex(this.currentIndex);})}build() {Tabs({barPosition: BarPosition.End,controller: this.tabsController}) {TabContent() {//需要切换的tab，自己定义}.padding({ left: $r('app.float.mainPage_padding'), right: $r('app.float.mainPage_padding') }).backgroundColor($r('app.color.mainPage_backgroundColor')).tabBar(this.TabBuilder(CommonConstants.HOME_TITLE, CommonConstants.HOME_TAB_INDEX,$r('app.media.home_selected'), $r('app.media.home_normal')))TabContent() {//需要切换的tab，自己定义}.padding({ left: $r('app.float.mainPage_padding'), right: $r('app.float.mainPage_padding') }).backgroundColor($r('app.color.mainPage_backgroundColor')).tabBar(this.TabBuilder(CommonConstants.MINE_TITLE, CommonConstants.MINE_TAB_INDEX,$r('app.media.mine_selected'), $r('app.media.mine_normal')))}.width(CommonConstants.FULL_PARENT).backgroundColor(Color.White).barHeight($r('app.float.mainPage_barHeight')).barMode(BarMode.Fixed).onChange((index: number) => {this.currentIndex = index;})}
}