鸿蒙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即可查看效果

相关推荐
蓝冰印8 小时前
HarmonyOS Next 快速参考手册
linux·ubuntu·harmonyos
流影ng8 小时前
【HarmonyOS】并发线程间的通信
typescript·harmonyos
君逸臣劳11 小时前
【Harmony Next】手把手撸一个支持高度自定义的Toast
harmonyos
安卓开发者12 小时前
鸿蒙NEXT传感器开发概述:开启智能感知新时代
华为·harmonyos
Larry_Yanan18 小时前
QML学习笔记(四十)QML的ApplicationWindow和StackView
c++·笔记·qt·学习·ui
安卓开发者1 天前
鸿蒙NEXT按键拦截与监听开发指南
华为·harmonyos
2503_928411561 天前
10.13 Tabs选项卡布局
华为·harmonyos·鸿蒙
我爱学习_zwj1 天前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos
HMSCore1 天前
消息推送策略:如何在营销与用户体验间找到最佳平衡点
harmonyos
HMSCore1 天前
同一设备多账号登录,如何避免消息推送“串门”?
harmonyos