HarmonyOS 6 AtomicServiceTabs 纯图标样式使用文档

纯图标样式核心实现原理

1. TabBarOptions 构造方法说明

newTabBarOptions(icon资源,文字文本,未选中图标色,选中图标色)

纯图标样式配置规则：

1. 第二个文本参数传空字符串''，隐藏所有标签文字；
2. 第一个参数传入系统图标资源/本地图片资源；
3. 通过第三、第四个参数区分未选中图标颜色与选中图标颜色；
4. 无需额外文字布局配置，组件自动适配纯图标排版。

2. 核心样式区分

完整代码

// Index.ets import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI'; @Entry @Component struct Index { @State message: string = '首页'; @State onClickNumber: number = 0; @State currentIndex: number = 0; @State comingIndex: number = 0; onContentWillChangeCallBack: OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => { this.currentIndex = currentIndex; this.comingIndex = comingIndex; console.info('OnContentWillChangeCallback') return true; } onTabClick: Callback<number> = (index:number)=>{ this.onClickNumber ++; console.info('onTabClick'); } @Builder tabContent1() { Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87') } @Builder tabContent2() { Column().width('100%').height('100%').backgroundColor('#007DFF') } @Builder tabContent3() { Column().width('100%').height('100%').backgroundColor('#FFBF00') } build() { Stack() { AtomicServiceTabs({ tabContents: [ () => { this.tabContent1() }, () => { this.tabContent2() }, () => { this.tabContent3() } ], tabBarOptionsArray: [ new TabBarOptions($r('sys.media.ohos_ic_public_phone'), '', Color.Black, Color.Blue), new TabBarOptions($r('sys.media.ohos_ic_public_location'), '', Color.Black, Color.Blue), new TabBarOptions($r('sys.media.ohos_ic_public_more'), '', Color.Black, Color.Blue), ], tabBarPosition: TabBarPosition.BOTTOM, barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'), onTabBarClick:this.onTabClick, onContentWillChange: this.onContentWillChangeCallBack, }) Column() { Text("onchange回调次数:" + this.onClickNumber) Text("comingIndex = " + this.comingIndex + ", currentIndex = " + this.currentIndex) }.margin({top:500}) }.height('100%') } }

运行效果如图：

核心参数

1. 页面内容配置 tabContents

• 类型：Array<()=>void>
• 作用：绑定每一个图标标签对应的页面内容
• 写法：通过@Builder构建页面布局，以箭头函数形式传入数组

2. 纯图标导航栏配置 tabBarOptionsArray

为本文档纯图标样式核心配置，数组内依次对应每一项导航图标：

newTabBarOptions($r('sys.media.ohos_ic_public_phone'),// 系统图标资源'',// 文本置空，实现纯图标Color.Black,// 未选中图标颜色Color.Blue// 选中图标颜色)

3. 导航栏位置 tabBarPosition

• TabBarPosition.BOTTOM：底部展示图标导航（常用）
• TabBarPosition.TOP：顶部展示图标导航

4. 导航栏背景 barBackgroundColor

支持系统颜色资源、自定义颜色值，统一设置纯图标导航栏整体背景底色。

事件回调说明

1. onTabBarClick 图标点击回调

• 触发时机：点击任意导航图标立即触发
• 入参：index当前点击图标下标
• 用途：统计点击次数、单独处理图标点击业务逻辑

2. onContentWillChange 页面切换前置回调

• 触发时机：页面正式切换之前执行
• 入参：
  • currentIndex：当前停留页面下标
  • comingIndex：即将跳转的页面下标
• 返回值：
  • true：允许正常切换页面
  • false：拦截页面切换，停留在当前页面
• 适用场景：切换页面前权限校验、数据保存、弹窗提示等

总结

1. 工程限制
   AtomicServiceTabs仅支持鸿蒙原子服务工程，标准应用工程引入后无法渲染、无点击交互，属于组件本身环境限制。
2. 资源规范
   纯图标优先使用鸿蒙系统公共图标资源，减少本地图片体积，适配多设备分辨率。
3. 版本适配
   最低适配 HarmonyOS 5 及以上，HarmonyOS 6 完整兼容全部新增回调与样式能力。
4. 样式禁止改动
   如需保持标准纯图标样式，不可将第二个空文本参数填写文字，否则会变成图文混合导航。

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力