HarmonyOS6 SubHeaderV2 下拉选择器内容型子标题使用文档

文章目录模块导入核心实体与枚举说明核心实体类枚举说明关键入参完整代码代码逻辑解析运行效果总结模块导入import { SubHeaderV2, SubHeaderV2OperationType, SubHeaderV2OperationItem, SubHeaderV2Title, SubHeaderV2Select, Prompt } from kit.ArkUI;核心实体与枚举说明核心实体类SubHeaderV2Select下拉选择器配置实体管理选项列表、默认选中索引、选中文案及切换回调。SubHeaderV2OperationItem右侧操作项实体单个图标按钮的资源与点击事件配置。枚举说明SubHeaderV2OperationType.ICON_GROUP右侧多图标组模式最多支持展示3个功能图标横向自动均分布局。关键入参参数作用说明select绑定下拉选择器实体实现左侧下拉筛选功能operationType指定右侧为图标组类型operationItems右侧图标按钮数组配置多个图标资源与点击逻辑完整代码import { SubHeaderV2, SubHeaderV2OperationType, SubHeaderV2OperationItem, SubHeaderV2Title, SubHeaderV2Select, Prompt } from kit.ArkUI; Entry ComponentV2 struct SubHeaderExample { Local selectedValue: string aaa; Local selectedIndex: number 0; Local title: SubHeaderV2Title new SubHeaderV2Title({ primaryTitle: 一级标题, secondaryTitle: 二级标题 }); Local operationItems: SubHeaderV2OperationItem[] []; Local select: SubHeaderV2Select new SubHeaderV2Select({ options: [{ value: aaa }, { value: bbb }, { value: ccc }]); aboutToAppear(): void { this.title new SubHeaderV2Title({ primaryTitle: 一级标题, secondaryTitle: 二级标题 }); this.selectedValue selectDemo; this.select new SubHeaderV2Select({ options: [{ value: aaa }, { value: bbb }, { value: ccc }], selectedContent: this.selectedValue, selectedIndex: this.selectedIndex, onSelect: (index: number, value?: string) { Prompt.showToast({ message: selectDemo }) } }) this.operationItems [ new SubHeaderV2OperationItem({ content: $r(sys.media.ohos_ic_public_email), action: () { Prompt.showToast({ message: demo }) } }), new SubHeaderV2OperationItem({ content: $r(sys.media.ohos_ic_public_email), action: () { Prompt.showToast({ message: demo }) } }), new SubHeaderV2OperationItem({ content: $r(sys.media.ohos_ic_public_email), action: () { Prompt.showToast({ message: demo }) } })] } build() { Column() { Column() { SubHeaderV2({ select: this.select, operationType: SubHeaderV2OperationType.ICON_GROUP, operationItems: this.operationItems }) } } } }运行效果如图代码逻辑解析组件采用 ArkUI V2 编程范式通过Local定义响应式状态在aboutToAppear生命周期统一初始化数据避免 build 内重复创建实体。左侧通过SubHeaderV2Select配置下拉选项、默认选中索引和选中回调点击下拉选项可触发 Toast 提示完成筛选交互。右侧设置ICON_GROUP图标组类型通过SubHeaderV2OperationItem数组批量配置3个系统图标每个图标独立绑定点击事件点击后响应弹窗提示。整体不配置 title 和 icon 属性仅保留下拉选择器与图标操作区形成标准 Spinner 内容型子标题布局结构精简、交互独立。运行效果页面左侧展示下拉选择器默认显示指定文案点击可展开切换 aaa/bbb/ccc 选项并触发回调。右侧横向均匀排列三个功能图标每个图标点击均可独立弹出 Toast 提示。整体布局适配 HarmonyOS6 系统UI风格自适应手机、平板、2in1 设备宽度排版规整无布局错乱。总结该组件仅支持API 18与 HarmonyOS6 版本必须使用ComponentV2语法不兼容旧版组件写法。Spinner 型子标题核心依赖SubHeaderV2Select下拉实体与ICON_GROUP图标组类型二者组合实现筛选快捷操作能力。右侧图标组最多支持3个图标超出数量会自动适配隐藏建议按规范控制图标数量。不建议直接给 SubHeaderV2 设置通用属性和通用事件容易生成额外节点导致样式失效样式定制优先使用内置实体类配置。当前文件内容过长豆包只阅读了前 31%。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力