HarmonyOS6 SubHeaderV2 自定义标题样式使用文档

模块导入

import { SubHeaderV2, SubHeaderV2OperationType, SubHeaderV2OperationItem, SubHeaderV2Title, Prompt, TextModifier, Color } from '@kit.ArkUI';

核心能力说明

TextModifier是鸿蒙文本样式修饰工具，可独立配置文字颜色、大小、粗细等属性。在SubHeaderV2Title标题实体中，通过primaryTitleModifier、secondaryTitleModifier可分别绑定修饰器，实现一级标题、二级标题样式差异化定制。右侧搭配TEXT_ARROW操作类型，展示文字加右箭头的经典“更多”入口，样式配置与交互逻辑相互独立。组件采用@Local管理状态，在aboutToAppear生命周期统一初始化数据，符合 V2 组件开发规范。

完整代码

import { SubHeaderV2, SubHeaderV2OperationType, SubHeaderV2OperationItem, SubHeaderV2Title, Prompt, TextModifier, Color } from '@kit.ArkUI'; @Entry @ComponentV2 struct SubHeaderExample { @Local primaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue); @Local secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue); @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: '一级标题' }); @Local operationItems4: SubHeaderV2OperationItem[] = []; aboutToAppear(): void { this.title = new SubHeaderV2Title({ primaryTitle: '一级标题', primaryTitleModifier: this.primaryModifier, secondaryTitle: '二级标题', secondaryTitleModifier: this.secondaryModifier }); this.operationItems4 = [new SubHeaderV2OperationItem({ content: '更多信息', action: () => { Prompt.showToast({ message: 'demo' }) } })] } build() { Column() { SubHeaderV2({ title: this.title, operationType: SubHeaderV2OperationType.TEXT_ARROW, operationItems: this.operationItems4 }) } } }

运行效果如图：

代码逻辑解析

代码使用@ComponentV2声明V2版本组件，通过@Local定义响应式状态变量，分别存储一级标题、二级标题对应的文本修饰器、标题实体以及右侧操作项数组。

在aboutToAppear中完成数据初始化，实例化SubHeaderV2Title时，除了设置一、二级标题文本外，还分别绑定对应的TextModifier，为两行文字统一配置蓝色字体。同时初始化右侧操作项，定义展示文案与点击触发的Toast提示。

页面渲染阶段，将初始化完成的标题实体、操作类型与操作项传入SubHeaderV2。右侧设置为TEXT_ARROW类型，自动生成文字加右箭头样式，整体保留原生双行标题布局，仅通过修饰器完成样式自定义。

运行效果

组件中间区域展示双行标题文本，一级标题与二级标题均呈现蓝色字体；页面右侧显示“更多信息”文字及向右箭头标识。点击右侧操作区域，正常弹出Toast提示，交互功能运行正常。整体布局规整，标题样式按照预设修饰规则展示，适配HarmonyOS6系统视觉风格。

总结

该组件及文本样式定制能力依赖高版本API与@ComponentV2语法，不兼容旧版组件与FA应用模型，穿戴设备也无法使用。TextModifier仅作用于文本样式，不会改变标题原有布局结构，适合仅需微调文字外观、保留原生排版的场景。建议在生命周期内统一初始化修饰器与标题实体，避免在渲染函数中重复创建实例，保障页面渲染性能。一、二级标题支持绑定不同的文本修饰器，可灵活实现文字颜色、字号、字重等差异化样式。

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