鸿蒙Arkts开发框架经验分享之主页面Tabs_鸿蒙arkts tab

目录

Tabs语法

1.1 HomePage()

1.2 .tabBar参数输入

---

Tabs语法

@Entry
@Component
struct community{
    @StorageProp('currentDeviceSize') currentDeviceSize:string=CommonConstants.SM;
    @State currentIndex:number=CommonConstants.HOME_TAB_INDEX;
 
    aboutToAppear(){
      MultipleDevicesUtils.unregister();
    }
 
    build()
    {
      Tabs({
        barPosition: this.currentDeviceSize === CommonConstants.LG ?
        BarPosition.Start : BarPosition.End,
        index: this.currentIndex
      })
      {
        TabContent() {
         HomePage()
        }
        .tabBar(this.TabBuilder(CommonConstants.HOME_TITLE, CommonConstants.HOME_TAB_INDEX,
          $r('app.media.ic_home_selected'), $r('app.media.ic_home_normal')))
 
        TabContent(){
          Challenges()
        }
        .tabBar(this.TabBuilder(CommonConstants.CHALLENGE_TITLE,CommonConstants.HOME_TAB_INDEX,
        $r('app.media.ic_challen_selected'),$r('app.media.ic_challen_normal')))
 
        TabContent() {
          MinePage()
        }
        .tabBar(this.TabBuilder(CommonConstants.MINE_TITLE, CommonConstants.MINE_TAB_INDEX,
          $r('app.media.ic_mine_selected'), $r('app.media.ic_mine_normal')))
 
 
      }
      .barWidth(this.currentDeviceSize === CommonConstants.LG ?
      StyleConstants.BAR_WIDTH_LG : StyleConstants.FULL_PARENT)
      .barHeight(this.currentDeviceSize === CommonConstants.LG ?
      StyleConstants.BAR_HEIGHT_LG : StyleConstants.BAR_DEFAULT_HEIGHT)
      .vertical(this.currentDeviceSize === CommonConstants.LG)
      .backgroundColor(Color.White)
      .barMode(BarMode.Fixed)
      .scrollable(false)
      .onChange((index: number) => {
        this.currentIndex = index;
        Logger.info(CommonConstants.TAG_MAIN_PAGE, 'onChange index ' + JSON.stringify(index));
      })
    }
 
  @Builder TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === index ? selectedImg : normalImg)//通过当前活跃的currentIndex和页签对应的targetIndex匹配与否
        .width($r('app.float.base_tab_size'))                                         //从而决定UI显示的样式
        .height($r('app.float.base_tab_size'))
      Text(title)
        .margin({ top: $r('app.float.base_tab_top') })
        .fontSize($r("app.float.tab_font_size"))
        .fontColor(this.currentIndex === index ? $r('app.color.main_page_selected') : $r('app.color.main_page_normal'))
    }
    .justifyContent(FlexAlign.Center)
    .height(StyleConstants.FULL_PARENT)
    .width(StyleConstants.FULL_PARENT)
    }
}

在这一段代码中，需要注意：

一是以函数HomePage()为TabContent的内容，以便开发者更方便的debug和开发

二是在属性.tabBar输入参数的过程中，使用了TabBuilder这个自定义函数进行，最终效果为点击便可以改变图片

1.1 HomePage()

代码段：

（输入主页的页面代码）

对于这个函数的引用：

需要使用import语法进行插入：

import HomePage from '../view/HomePage';

对于这个函数的定义：

1）文件放在/ets/view/当中

2）函数定义前加 export default struct

在其中，Text的输入参数是存放在/src/main/resources/base/element/string.json中，方便改代码进行整理，在这个文件中存放了很多字符串常量，这个优势在于可以使用resources下的文件zh_CN和en_US进行语言切换管理

在接下来内容中，SwiperView()等函数进行了引用

SwiperView()函数定义

在其中的核心函数是：

//Swiper(){

}中的函数//

ForEach函数：

接口描述：

ForEach(

arr: Array,//数据源，可以设置为返回值为数组类型的函数，必选项

itemGenerator: (item: any, index: number) => void, //组件生成函数，item参数：arr数组中的数据项，必选项

keyGenerator?: (item: any, index: number) => string //键值生成函数，item参数：arr数组中的数据项

)

getSwiperImages()函数

@Preview  //预览装饰器
@Component
struct SwiperView {//轮播图函数
  @StorageProp('currentDeviceSize') currentDeviceSize: string = CommonConstants.SM;
 
  build() {
    Column() {
      Swiper() {
        ForEach(mainViewModel.getSwiperImages(), (item: Resource) => {
                  //mainViewModel这个包里面有getSwiperImages函数
                  //且arr这个传参的实参为getSwiperImages
                   //箭头函数:item是形参，Resource是形参的数据类型
          Image(item)                                                 
            .borderRadius($r('app.float.swiper_radius'))                                   
        }, (item: Resource) => JSON.stringify(item))
      }
      .displayCount(CommonConstants.SWIPER_CACHE_COUNT)
      .autoPlay(true)//该轮播图是自动播放
      .width(StyleConstants.COMMON_WIDTH)
      .itemSpace(this.currentDeviceSize === CommonConstants.SM ?
        0 : StyleConstants.ITEM_SPACE)
      .margin($r('app.float.common_margin'))
      .displayCount(this.currentDeviceSize === CommonConstants.SM ?
        StyleConstants.SWIPER_COUNT_ONE :
        (this.currentDeviceSize === CommonConstants.MD ?
        StyleConstants.SWIPER_COUNT_TWO : StyleConstants.SWIPER_COUNT_THREE))
    }
  }
}

1.2 .tabBar参数输入

这个参数输入是一个本ets界面定义的函数，这个函数是以@Builder为装饰器

@Builder装饰器：

装饰的函数遵循build()函数语法规则，在@Builder定义的函数中，分为：全局自定义构建函数，使用的时候用function进行修饰；局部自定义构建函数，不用function进行修饰。

TabBuilder函数主体：

@Builder TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === index ? selectedImg : normalImg)
//通过当前活跃的currentIndex和页签对应的targetIndex匹配与否
//从而决定UI显示的样式
        .width($r('app.float.base_tab_size'))                                         
        .height($r('app.float.base_tab_size'))
      Text(title)
        .margin({ top: $r('app.float.base_tab_top') })
        .fontSize($r("app.float.tab_font_size"))
        .fontColor(this.currentIndex === index ? $r('app.color.main_page_selected') : $r('app.color.main_page_normal'))
    }
    .justifyContent(FlexAlign.Center)
    .height(StyleConstants.FULL_PARENT)
    .width(StyleConstants.FULL_PARENT)
    }

其中currentIndex在build()函数中定义为@state变量