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

相关推荐
小梦白18 分钟前
RPG59.玩家拾取物品三:可拾取物品的提示UI
ui·ue5
周胡杰25 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
迷曳10 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
迷曳15 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
NoirSeeker15 小时前
在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用(详细)
c++·windows·arkts·鸿蒙·交叉编译
R-G-B16 小时前
【27】MFC入门到精通——MFC 修改用户界面登录IP IP Address Control
tcp/ip·ui·mfc·mfc 用户界面登录·mfc ip登录·mfc address登录
布兰妮甜19 小时前
Adobe Photoshop:数字图像处理的终极工具指南
图像处理·ui·adobe·photoshop
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
orange_の_呜1 天前
Adobe illustrator、klayout绘制光刻图及其尺寸映射
ui·adobe·illustrator
共享ui设计和前端开发1 天前
数字孪生技术引领UI前端设计新高度:跨平台数据一致性的可视化
ui