HarmonyOS 6 AtomicServiceTabs 图标加文本（自定义图文排布）使用文档

核心说明

1. 图标 + 文本组合样式（基础形态）

AtomicServiceTabs通过TabBarOptions实现图标+文本组合展示：

newTabBarOptions(icon:$r('sys.media.ohos_ic_public_phone'),// 图标资源text:'绿色',// 标签文本color:Color.Black,// 未选中颜色selectedColor:Color.Red// 选中颜色)

✅ 同时配置icon + text→ 自动渲染为图标+文本导航项
✅ 支持统一设置未选中/选中状态颜色
✅ 支持系统图标、本地图标混用

2. 自定义图文排布（layoutMode）

layoutMode是控制图标与文本排列方向的核心属性，支持两种模式：

你代码中通过按钮动态修改this.layoutMode可实时切换布局，符合 HarmonyOS 6 官方标准用法。

代码核心配置

1. 导入依赖

import{AtomicServiceTabs,TabBarOptions,TabBarPosition,OnContentWillChangeCallback}from'@kit.ArkUI';

2. 状态定义

@StatelayoutMode:LayoutMode=LayoutMode.VERTICAL;

初始布局：图标在上、文字在下

3. TabBarOptions（图标+文本核心配置）

tabBarOptionsArray:[newTabBarOptions($r('sys.media.ohos_ic_public_phone'),'绿色',Color.Black,Color.Red),newTabBarOptions($r('sys.media.ohos_ic_public_location'),'蓝色',Color.Black,Color.Red),newTabBarOptions($r('sys.media.ohos_ic_public_more'),'黄色',Color.Black,Color.Red),]

4. 布局模式绑定

layoutMode:this.layoutMode

5. 动态切换布局按钮

Button("layoutMode垂直 ").onClick(()=>{this.layoutMode=LayoutMode.VERTICAL;})Button("layoutMode水平 ").onClick(()=>{this.layoutMode=LayoutMode.HORIZONTAL;})

运行效果如图：

支持的事件回调

1. onTabBarClick

• 触发时机：点击标签项时
• 用途：点击埋点、状态统计

2. onContentWillChange

• 触发时机：页面切换之前
• 参数：currentIndex / comingIndex
• 返回 boolean：true 允许切换，false 禁止切换

3. onChange

• 触发时机：页面切换完成后
• 用途：切换完成后的业务逻辑

图文排布效果说明

1. VERTICAL 垂直布局

• 图标在上
• 文本在下
• 底部导航最常用样式

2. HORIZONTAL 水平布局

• 图标在左
• 文本在右
• 适合顶部标签栏或宽屏导航

总结

1. 必须同时传入 icon 和 text才能显示图标+文本
2. layoutMode仅控制排列方向，不影响颜色、选中状态
3. 该组件仅支持原子化服务（Atomic Service）工程
4. HarmonyOS 6 完整支持动态修改layoutMode实时刷新布局
5. 颜色统一作用于：图标 + 文本（选中/未选中）

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