HarmonyOS 6 SubHeaderV2 效率型子标题 使用文档
文章目录模块导入核心概念与属性1. 核心实体类2. 组件入参说明3. 枚举说明4. 状态管理完整代码代码逻辑解析运行效果总结模块导入import { SubHeaderV2OperationType, SubHeaderV2, SubHeaderV2Title, SubHeaderV2OperationItem, Prompt, TextModifier, Color } from kit.ArkUI;核心概念与属性1. 核心实体类SubHeaderV2不再使用零散属性传参而是通过专用实体类结构化配置SubHeaderV2Title标题实体类用于配置一级标题、二级标题及文本样式修饰器。SubHeaderV2OperationItem操作项实体类配置右侧按钮文案、点击回调事件。2. 组件入参说明属性类型说明iconResource左侧功能图标资源支持系统图标/本地资源titleSubHeaderV2Title标题配置实体承载主/副标题文本operationTypeSubHeaderV2OperationType右侧操作区类型效率型使用BUTTON纯文字按钮operationItemsSubHeaderV2OperationItem[]右侧操作按钮数组3. 枚举说明SubHeaderV2OperationTypeBUTTON纯文字按钮效率型子标题默认类型无额外图标/箭头。4. 状态管理示例基于V2 语法使用Local声明本地状态变量在aboutToAppear生命周期中初始化实体类数据实现数据与视图解耦。完整代码import { SubHeaderV2OperationType, SubHeaderV2, SubHeaderV2Title, SubHeaderV2OperationItem, Prompt, TextModifier, Color } from kit.ArkUI; Entry ComponentV2 struct SubHeaderExample { // 本地状态变量V2 语法 Local selectText: string TTTTT Local selectIndex: number 2 Local flag: boolean true; Local index: number 1; Local primaryTitle: ResourceStr 一级标题; Local secondaryTitle: ResourceStr 二级标题; Local subHeaderIcon: Resource $r(sys.media.ohos_ic_public_email); Local title: SubHeaderV2Title new SubHeaderV2Title({ primaryTitle: 一级标题 }); Local primaryModifier: TextModifier new TextModifier().fontColor(Color.Red); Local secondaryModifier: TextModifier new TextModifier().fontColor(Color.Red); Local subHeaderOperationType: SubHeaderV2OperationType SubHeaderV2OperationType.BUTTON; Local operationItems: SubHeaderV2OperationItem[] []; aboutToAppear(): void { // 初始化标题实体类绑定主、副标题 this.title new SubHeaderV2Title({ primaryTitle: this.primaryTitle, secondaryTitle: this.secondaryTitle, }); // 初始化右侧操作按钮实体数组 this.operationItems [new SubHeaderV2OperationItem({ content: 操作, action: () { Prompt.showToast({ message: demo2 }) } })] } build() { Column() { Column() { // 效率型 SubHeaderV2 SubHeaderV2({ icon: this.subHeaderIcon, title: this.title, operationType: this.subHeaderOperationType, operationItems: this.operationItems }); } } } }运行效果如图代码逻辑解析V2 语法与状态声明使用ComponentV2标识 V2 自定义组件通过Local定义组件内本地状态用于存储文本、图标、实体类实例。生命周期初始化数据在aboutToAppear页面即将显示时统一初始化SubHeaderV2Title标题和SubHeaderV2OperationItem操作按钮实体分离数据初始化与UI渲染代码结构更规范。左侧图标配置icon传入系统邮件图标资源作为功能标识是效率型子标题标配元素。标题区域配置通过SubHeaderV2Title实体传入一级、二级标题文本组件自动渲染双行标题布局。右侧效率按钮operationType设置为BUTTON代表纯文字操作按钮operationItems数组传入操作项实体定义按钮文字与点击事件点击后弹出 Toast 提示。运行效果组件左侧展示邮件图标中间区域展示「一级标题、二级标题」双行文本右侧展示「操作」文字按钮属于标准效率型布局点击右侧按钮弹出 Toast 提示交互正常整体布局紧凑简约符合系统效率型标题栏设计风格。总结版本与语法限制SubHeaderV2依赖API 12和ArkTS V2 语法ComponentV2低版本API、V1组件无法使用。实体类规范必须使用SubHeaderV2Title、SubHeaderV2OperationItem官方实体类传参不支持传统零散属性写法。模型与设备仅 Stage 模型可用FA 模型、智能穿戴设备不支持该组件。初始化建议建议在aboutToAppear中统一初始化实体数据避免 build 内频繁创建实例引发性能问题。操作项数量operationItems数组支持配置多个按钮效率型场景建议只保留单个文字按钮。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力