HarmonyOS 6 AtomicServiceTabs 图标加文本（自定义图文排布）使用文档
文章目录
- 核心说明
- 1. 图标 + 文本组合样式（基础形态）
- 2. 自定义图文排布（layoutMode）
- 代码核心配置
- 1. 导入依赖
- 2. 状态定义
- 3. TabBarOptions（图标+文本核心配置）
- 4. 布局模式绑定
- 5. 动态切换布局按钮
- 支持的事件回调
- 1. onTabBarClick
- 2. onContentWillChange
- 3. onChange
- 图文排布效果说明
- 1. VERTICAL 垂直布局
- 2. HORIZONTAL 水平布局
- 总结
核心说明
1. 图标 + 文本组合样式（基础形态）
AtomicServiceTabs通过TabBarOptions实现图标+文本组合展示：
newTabBarOptions(icon:$r('sys.media.ohos_ic_public_phone'),// 图标资源text:'绿色',// 标签文本color:Color.Black,// 未选中颜色selectedColor:Color.Red// 选中颜色)✅ 同时配置icon + text→ 自动渲染为图标+文本导航项
✅ 支持统一设置未选中/选中状态颜色
✅ 支持系统图标、本地图标混用
2. 自定义图文排布（layoutMode）
layoutMode是控制图标与文本排列方向的核心属性，支持两种模式：
| 枚举值 | 含义 | 展示效果 |
|---|---|---|
| LayoutMode.VERTICAL | 垂直排布（默认） | 图标在上，文本在下 |
| LayoutMode.HORIZONTAL | 水平排布 | 图标在左，文本在右 |
你代码中通过按钮动态修改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.layoutMode5. 动态切换布局按钮
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 水平布局
- 图标在左
- 文本在右
- 适合顶部标签栏或宽屏导航
总结
- 必须同时传入 icon 和 text才能显示图标+文本
layoutMode仅控制排列方向，不影响颜色、选中状态- 该组件仅支持原子化服务（Atomic Service）工程
- HarmonyOS 6 完整支持动态修改
layoutMode实时刷新布局 - 颜色统一作用于：图标 + 文本（选中/未选中）
如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力