HarmonyOS 6 SubHeader 设置左侧 Symbol 图标使用文档

文章目录模块导入核心属性SymbolEffectStrategy 常用枚举示例代码代码逻辑解析运行效果总结模块导入import { Prompt, OperationType, SubHeader, SymbolEffectStrategy } from kit.ArkUI;核心属性属性作用版本要求icon设置左侧图标资源支持sys.symbol系统矢量图标API 11iconSymbolOptionsSymbol 图标专属配置对象可配置渲染策略、动效、颜色、字号等API 12secondaryTitle副标题文本配置后左侧图标才会正常显示API 11operationType右侧操作区类型示例使用普通按钮模式BUTTONAPI 11operationItem右侧按钮文案与点击事件API 11SymbolEffectStrategy 常用枚举HIERARCHICAL分层渲染策略适配系统多色符号图标样式。示例代码import { Prompt, OperationType, SubHeader, SymbolEffectStrategy } from kit.ArkUI; Entry Component struct SubHeaderExample { build() { Column() { SubHeader({ // 左侧绑定系统Symbol矢量图标 icon: $r(sys.symbol.ohos_wifi), // Symbol图标自定义配置 iconSymbolOptions: { effectStrategy: SymbolEffectStrategy.HIERARCHICAL, }, // 副标题文本 secondaryTitle: 标题, // 右侧为普通文本按钮 operationType: OperationType.BUTTON, operationItem: [{ value: 操作, action: () { Prompt.showToast({ message: demo }); } }] }) } } }运行效果如图代码逻辑解析左侧 Symbol 图标设置通过icon: $r(sys.symbol.ohos_wifi)引用鸿蒙系统内置矢量符号图标无需本地图片资源轻量化且自适应分辨率。图标样式配置iconSymbolOptions配置effectStrategy动效/渲染策略使用HIERARCHICAL分层模式让 Symbol 图标跟随系统主题分层着色展示。标题搭配规则必须设置secondaryTitle副标题左侧 Symbol 图标才会正常显示仅主标题时图标不生效。右侧操作区设置OperationType.BUTTON普通文本按钮绑定「操作」文字与点击 Toast 事件组成标准子标题布局。运行效果子标题左侧展示系统 WiFi 矢量 Symbol 图标图标按分层策略渲染样式跟随系统主题中间显示副标题文字右侧展示「操作」可点击按钮点击弹出提示。总结iconSymbolOptions仅 API 12 及以上支持低版本需去掉该配置左侧 Symbol 图标依赖secondaryTitle不设副标题图标不显示仅 Stage 模型支持 SubHeaderFA 模型、穿戴设备不兼容可在iconSymbolOptions扩展fontColor、fontSize、fontWeight自定义图标颜色大小。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力