文章目录
- 模块导入
- 核心属性
- 1. 左侧下拉选择器 `select`
- 2. 右侧操作区基础配置
- 3. Symbol 样式相关枚举/字段
- 示例代码
- 代码解析
- 运行效果
- 总结
模块导入
import { Prompt, OperationType, SubHeader, FontWeight, SymbolRenderingStrategy } from '@kit.ArkUI';核心属性
1. 左侧下拉选择器select
| 字段 | 说明 |
|---|---|
| options | 下拉选项数组，配置展示文本 |
| value | 选择器默认显示文案 |
| selected | 默认选中项索引，从 0 开始 |
| onSelect | 选项切换回调 |
2. 右侧操作区基础配置
| 属性 | 说明 |
|---|---|
| operationType | ICON_GROUP，标识右侧为多图标按钮组 |
| operationItem | 图标数组，value传入sys.symbol矢量图标资源，action为点击事件 |
| operationSymbolOptions | 数组类型，与 operationItem 一一对应，单独配置每个 Symbol 图标样式 |
3. Symbol 样式相关枚举/字段
- FontWeight：字体/图标粗细
Lighter：细体
- SymbolRenderingStrategy：图标渲染策略
MULTIPLE_COLOR：多色渲染，按fontColor数组依次上色MULTIPLE_OPACITY：多透明度渲染，颜色不变、分层透明度变化
- 通用样式字段
fontColor：图标颜色数组，配合渲染策略生效
示例代码
import { Prompt, OperationType, SubHeader, FontWeight, SymbolRenderingStrategy } from '@kit.ArkUI'; @Entry @Component struct SubHeaderExample { build() { Column() { SubHeader({ // 左侧下拉选择器 select: { options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], value: 'selectDemo', selected: 2, onSelect: () => { Prompt.showToast({ message: 'demo' }); } }, // 右侧类型：图标组 operationType: OperationType.ICON_GROUP, // 右侧Symbol图标列表 operationItem: [{ value: $r('sys.symbol.ohos_lungs'), action: () => { Prompt.showToast({ message: 'icon1' }); } }, { value: $r('sys.symbol.ohos_lungs'), action: () => { Prompt.showToast({ message: 'icon2' }); } }, { value: $r('sys.symbol.ohos_lungs'), action: () => { Prompt.showToast({ message: 'icon3' }); } }], // 逐个配置右侧图标Symbol样式，数组顺序与图标一一对应 operationSymbolOptions: [{ fontWeight: FontWeight.Lighter, }, { renderingStrategy: SymbolRenderingStrategy.MULTIPLE_COLOR, fontColor: [Color.Blue, Color.Grey, Color.Green], }, { renderingStrategy: SymbolRenderingStrategy.MULTIPLE_OPACITY, fontColor: [Color.Blue, Color.Grey, Color.Green], }] }) } } }运行效果如图：
代码解析
左侧下拉选择器
配置三组下拉选项，默认选中下标2，切换选项触发 Toast 提示，作为模块筛选入口。右侧图标组声明
operationType设置为ICON_GROUP，横向排列多个图标；operationItem统一引用肺部 Symbol 矢量图标，每个图标绑定独立点击事件。差异化样式配置
operationSymbolOptions数组和operationItem顺序严格一一对应，分别控制三个图标：
- 第一个图标：仅设置字体粗细为细体；
- 第二个图标：启用多色渲染策略，按颜色数组分层上色；
- 第三个图标：启用多透明度渲染策略，基于颜色数组做透明度分层展示。
运行效果
- 左侧下拉选择器可正常展开、切换选项并触发回调；
- 右侧横向展示三个同款 Symbol 图标，但样式各不相同：细体、多彩、多透明度；
- 点击每一个图标，分别弹出对应 Toast 提示，交互正常；
- 矢量图标高清无锯齿，适配不同屏幕分辨率。
总结
- 版本要求：
operationSymbolOptions、Symbol 渲染策略仅API 12 及以上支持； - 数组顺序：
operationSymbolOptions必须和operationItem数量、顺序一一对应，样式才会正确绑定； - 渲染策略：
MULTIPLE_COLOR/MULTIPLE_OPACITY仅对标准多分层 Symbol 矢量图标生效； - 模型限制：仅 Stage 模型可用，FA 模型、穿戴设备不支持；
- 若图标数量少于样式数组，多余样式配置会被忽略。
如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力
