鸿蒙HarmonyOS之使用ArkTs语言实现自定义Tab菜单栏分页主页面UI

一、效果

显示为3个Tab菜单栏,中间可以滑动

二、实现步骤

1、Index.ets

示例代码中用到的颜色、文字、图片等资源可以自行替换

复制代码
import { Tab_1 } from './Tab_1';
import { Tab_2 } from './Tab_2';
import { Tab_3 } from './Tab_3';


//主页面
@Entry
@Component
struct Index {

  @State tabsIndex: number = 0;

  build() {
    //barPosition为End,vertical为false是底部导航
    Tabs({ barPosition: BarPosition.End }) {
      //tab1
      TabContent(){
        Tab_1()
      }
      .tabBar(this.TabBarBuilder(0,$r("app.media.ic_select_live"),$r("app.media.ic_unselect_live"),$r('app.string.tab_live')))

      //tab2
      TabContent(){
        Tab_2()
      }
     .tabBar(this.TabBarBuilder(1,$r("app.media.ic_select_cloud_upload"),$r("app.media.ic_unselect_cloud_upload"),$r('app.string.tab_cloud_upload')))

      //tab3
      TabContent(){
        Tab_3()
      }
      .tabBar(this.TabBarBuilder(2,$r("app.media.ic_select_setting"),$r("app.media.ic_unselect_setting"),$r('app.string.tab_setting')))
    }
    //barMode是控制导航菜单栏是否可以滚动,默认值为Fixed:固定导航栏
    .barMode(BarMode.Fixed)
    .barHeight(56)
    .barWidth('100%')
    .vertical(false)
    .backgroundColor($r('app.color.background_shallow_grey'))
    .onChange((index: number) => {
      //记录当前选中Tab页签位置
      this.tabsIndex = index;
    })
  }


  /**
   * 自定义导航栏tab组件样式
   * @param index 页签对应位置
   * @param selectedImage 选中状态图片资源
   * @param unselectedImage 未选中状态图片资源
   * @param tabBarName tab栏名称
   */
  @Builder
  TabBarBuilder(index: number, selectedImage: Resource, unselectedImage: Resource, tabBarName: Resource) {
    Column() {
      Image(this.tabsIndex === index ? selectedImage : unselectedImage)
        .width(24)
        .height(24)
        .margin({ bottom: 4 })

      Text(tabBarName)
        .fontSize(10)
        .fontFamily('HarmonyHeiTi-Medium')
        .fontColor(this.tabsIndex === index ? $r('app.color.tab_bar_select') : $r('app.color.tab_bar_unselect'))
    }
    .width('100%')
    .padding({ top: 6, bottom: 6 })
    .alignItems(HorizontalAlign.Center)
    .id(`tabBar${index}`)
  }
}

2、分别创建Tab_1、Tab_2、Tab_3的ArkTs页

示例:每个Tab页面内容可以在各自的ArkTs文件里面编写

复制代码
@Preview
@Component
export struct Tab_1 {

  build(){
    Row(){
      Text($r('app.string.tab_setting'))
        .fontSize(20)
        .fontFamily('HarmonyHeiTi-Medium')
        .fontColor($r('app.color.tab_bar_select'))
    }
    .width('100%')
    .height('100%')
  }
}

3、预览查看Index.ets即可查看效果

相关推荐
Georgewu5 小时前
【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)
harmonyos
Georgewu5 小时前
【HarmonyOS】Web 组件的 PDF 文档预览功能详解
harmonyos
海涛高软5 小时前
Qt的ui文件的编译和使用
ui
Chen--Xing7 小时前
第一届OpenHarmonyCTF--Crypto--WriteUp
网络安全·密码学·harmonyos
HarmonyOS_SDK9 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
harmonyos
塞尔维亚大汉9 小时前
鸿蒙内核源码分析(根文件系统) | 先挂到/上的文件系统
源码·harmonyos
别说我什么都不会9 小时前
【OpenHarmony】鸿蒙开发之Checksum
harmonyos
&芒果冰沙&11 小时前
【Axure RP】什么是Axure?Axure可以用来做什么?
ui·axure·ux
周胡杰11 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
simple丶12 小时前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui