1# SymbolGlyph 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @hddgzw--> 5<!--Designer: @pssea--> 6<!--Tester: @jiaoaozihao--> 7<!--Adviser: @HelloCrease--> 8 9显示图标小符号的组件。<!--RP1--><!--RP1End--> 10 11> **说明：** 12> 13> 该组件从API version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## 子组件 16 17不支持子组件。 18 19## 接口 20 21SymbolGlyph(value?: Resource) 22 23**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 24 25**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 26 27**系统能力：** SystemCapability.ArkUI.ArkUI.Full 28 29**参数：** 30 31| 参数名 | 类型 | 必填 | 说明 | 32| -------- | -------- | -------- | -------- | 33| value | [Resource](ts-types.md#resource)| 否 | SymbolGlyph组件的资源名，如 $r('sys.symbol.ohos_wifi')。 | 34 35> **说明：** 36> 37> $r('sys.symbol.ohos_wifi')中引用的资源为系统预置，SymbolGlyph仅支持系统预置的symbol资源名，引用非symbol资源将显示异常。 38 39## 属性 40 41支持[通用属性](ts-component-general-attributes.md)，不支持文本通用属性，仅支持以下特有属性： 42 43### fontColor 44 45fontColor(value: Array<ResourceColor>) 46 47设置SymbolGlyph组件颜色。 48 49**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 50 51**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55**参数：** 56 57| 参数名 | 类型 | 必填 | 说明 | 58| ------ | ---- | ---- | ----- | 59| value | Array\<[ResourceColor](ts-types.md#resourcecolor)\> | 是 | SymbolGlyph组件颜色。<br/> 默认值：不同渲染策略下默认值不同。 | 60 61### fontSize 62 63fontSize(value: number | string | Resource) 64 65设置SymbolGlyph组件大小。设置string类型时，支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。 66 67组件的图标显示大小由fontSize控制，设置width或height后，其他通用属性仅对组件的占位大小生效。 68 69**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 70 71**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 72 73**系统能力：** SystemCapability.ArkUI.ArkUI.Full 74 75**参数：** 76 77| 参数名 | 类型 | 必填 | 说明 | 78| ------ | ---- | ---- | ----- | 79| value | number \| string \| [Resource](ts-types.md#resource) | 是 | SymbolGlyph组件大小。<br/>默认值：16fp<br/>单位：[fp](ts-pixel-units.md)<br/>不支持设置百分比字符串。| 80 81### fontWeight 82 83fontWeight(value: number | FontWeight | string) 84 85设置SymbolGlyph组件粗细。number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。 86 87sys.symbol.ohos_lungs图标不支持设置fontWeight。 88 89**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 90 91**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 92 93**系统能力：** SystemCapability.ArkUI.ArkUI.Full 94 95**参数：** 96 97| 参数名 | 类型 | 必填 | 说明 | 98| ------ | ------------------------------------------------------------ | ---- | --------------------------------------------------- | 99| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 是 | SymbolGlyph组件粗细。<br/>默认值：FontWeight.Normal | 100 101### renderingStrategy 102 103renderingStrategy(value: SymbolRenderingStrategy) 104 105设置SymbolGlyph组件渲染策略。 106 107**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 108 109**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 110 111**系统能力：** SystemCapability.ArkUI.ArkUI.Full 112 113**参数：** 114 115| 参数名 | 类型 | 必填 | 说明 | 116| ------ | ---- | ---- | ----- | 117| value | [SymbolRenderingStrategy](#symbolrenderingstrategy11枚举说明) | 是 | SymbolGlyph组件渲染策略。<br/>默认值：SymbolRenderingStrategy.SINGLE | 118 119不同渲染策略效果可参考以下示意图。 120 121 122 123### effectStrategy 124 125effectStrategy(value: SymbolEffectStrategy) 126 127设置SymbolGlyph组件动效策略。 128 129**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 130 131**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 132 133**系统能力：** SystemCapability.ArkUI.ArkUI.Full 134 135**参数：** 136 137| 参数名 | 类型 | 必填 | 说明 | 138| ------ | ---- | ---- | ----- | 139| value | [SymbolEffectStrategy](#symboleffectstrategy11枚举说明) | 是 | SymbolGlyph组件动效策略。<br/>默认值：SymbolEffectStrategy.NONE | 140 141### symbolEffect<sup>12+</sup> 142 143symbolEffect(symbolEffect: SymbolEffect, isActive?: boolean) 144 145设置SymbolGlyph组件动效策略及播放状态。 146 147**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 148 149**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 150 151**系统能力：** SystemCapability.ArkUI.ArkUI.Full 152 153**参数：** 154 155| 参数名 | 类型 | 必填 | 说明 | 156| ------ | ---- | ---- | ----- | 157| symbolEffect | [SymbolEffect](#symboleffect12对象说明) | 是 | SymbolGlyph组件动效策略。<br/>默认值：[SymbolEffect](#symboleffect12对象说明) | 158| isActive | boolean | 否 | SymbolGlyph组件动效播放状态。<br/>true表示播放，false表示不播放。<br/>默认值：false | 159 160### symbolEffect<sup>12+</sup> 161 162symbolEffect(symbolEffect: SymbolEffect, triggerValue?: number) 163 164设置SymbolGlyph组件动效策略及播放触发器。 165 166**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 167 168**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 169 170**系统能力：** SystemCapability.ArkUI.ArkUI.Full 171 172**参数：** 173 174| 参数名 | 类型 | 必填 | 说明 | 175| ------ | ---- | ---- | ----- | 176| symbolEffect | [SymbolEffect](#symboleffect12对象说明) | 是 | SymbolGlyph组件动效策略。<br/>默认值：[SymbolEffect](#symboleffect12对象说明) | 177| triggerValue | number | 否 | SymbolGlyph组件动效播放触发器，在数值变更时触发动效。<br/>如果首次不希望触发动效，设置-1。 | 178 179> **说明：** 180> 181> 动效属性，仅支持使用effectStrategy属性或单个symbolEffect属性，不支持多种动效属性混合使用。 182 183### minFontScale<sup>18+</sup> 184 185minFontScale(scale: Optional\<number | Resource>) 186 187设置SymbolGlyph组件最小的字体缩放倍数。 188 189**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 190 191**系统能力：** SystemCapability.ArkUI.ArkUI.Full 192 193**参数：** 194 195| 参数名 | 类型 | 必填 | 说明 | 196| ------ | ---- | ---- | ----- | 197| scale |[Optional](ts-universal-attributes-custom-property.md#optionalt12)\<number \| [Resource](ts-types.md#resource)> | 是 | SymbolGlyph组件最小的字体缩放倍数。<br/>取值范围：[0, 1] <br/>设置为0，缩放最小。<br/>**说明：** <br/>设置的值小于0时，按值为0处理。设置的值大于1，按值为1处理。异常值默认不生效。 | 198 199### maxFontScale<sup>18+</sup> 200 201maxFontScale(scale: Optional\<number | Resource>) 202 203设置SymbolGlyph组件最大的字体缩放倍数。 204 205**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 206 207**系统能力：** SystemCapability.ArkUI.ArkUI.Full 208 209**参数：** 210 211| 参数名 | 类型 | 必填 | 说明 | 212| ------ | ---- | ---- | ----- | 213| scale |[Optional](ts-universal-attributes-custom-property.md#optionalt12)\<number \| [Resource](ts-types.md#resource)> | 是 | SymbolGlyph组件最大的字体缩放倍数。<br/>取值范围：[1, +∞)<br/>**说明：** <br/>设置的值小于1时，按值为1处理，异常值默认不生效。 | 214 215### shaderStyle<sup>20+</sup> 216 217shaderStyle(shaders: Array\<ShaderStyle | undefined\> | ShaderStyle) 218 219设置SymbolGlyph组件的渐变色效果。 220 221可以显示为径向渐变[RadialGradientStyle](../arkui-ts/ts-text-common.md#radialgradientstyle20)或线性渐变[LinearGradientStyle](../arkui-ts/ts-text-common.md#lineargradientstyle20)或纯色[ColorShaderStyle](../arkui-ts/ts-text-common.md#colorshaderstyle20)的效果，shaderStyle的优先级高于[fontColor](../arkui-ts/ts-basic-components-symbolSpan.md#fontcolor)和AI识别，纯色建议使用[fontColor](../arkui-ts/ts-basic-components-symbolSpan.md#fontcolor)。 222 223**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 224 225**系统能力：** SystemCapability.ArkUI.ArkUI.Full 226 227**参数：** 228 229| 参数名 | 类型 | 必填 | 说明 | 230| -------------- | -------------------------------------------- | ----------------------------------- | ----------------------------------- | 231| shaders | Array\<[ShaderStyle](../arkui-ts/ts-text-common.md#shaderstyle20) \| undefined\> \| [ShaderStyle](../arkui-ts/ts-text-common.md#shaderstyle20) | 是 | 径向渐变或线性渐变或纯色。<br/>传入ShaderStyle时，覆盖所有层；传入数组时，数据项是ShaderStyle，则应用该层；数组项是undefined，则该层使用SymbolGlyph默认颜色，未设置的层也应用默认颜色。根据传入的参数区分处理径向渐变[RadialGradientStyle](../arkui-ts/ts-text-common.md#radialgradientstyle20)或线性渐变[LinearGradientStyle](../arkui-ts/ts-text-common.md#lineargradientstyle20)或纯色[ColorShaderStyle](../arkui-ts/ts-text-common.md#colorshaderstyle20)，最终设置到SymbolGlyph组件上显示为渐变色效果。<br>**说明：** <br/>单位：[vp](ts-pixel-units.md)<br>中心点请按百分比使用。如果使用的是非百分比（例如10PX），效果等同于设置1000%。<br>半径建议使用百分比。<br>百分比是基于图标大小的百分比，建议取值范围[0, 1)。 | 232 233### symbolShadow<sup>20+</sup> 234 235symbolShadow(shadow: Optional\<ShadowOptions\>) 236 237设置SymbolGlyph组件的阴影效果。 238 239**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 240 241**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 242 243**系统能力：** SystemCapability.ArkUI.ArkUI.Full 244 245**参数：** 246 247| 参数名 | 类型 | 必填 | 说明 | 248| ------ | ---- | ---- | ----- | 249| shadow |[Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明)\> | 是 | SymbolGlyph组件的阴影效果。<br>单位：[vp](ts-pixel-units.md)<br>默认值：{<br>radius：0,<br>color：Color.Black,<br>offsetX：0,<br>offsetY：0<br>} <br>不支持fill、type属性和color中的ColoringStrategy枚举值。| 250 251## ScaleSymbolEffect<sup>12+</sup> 252 253ScaleSymbolEffect继承自父类SymbolEffect。 254 255**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 256 257**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 258 259**系统能力：** SystemCapability.ArkUI.ArkUI.Full 260 261### 属性 262 263| 名称 | 类型 | 只读 | 可选 | 说明 | 264| ---- | ---- | ---- | ---- | ---- | 265| scope | [EffectScope](#effectscope12枚举说明) | 否 | 是 | 动效范围。<br/>默认值：EffectScope.LAYER | 266| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 是 | 动效方向。<br/>默认值：EffectDirection.DOWN | 267 268### constructor<sup>12+</sup> 269 270constructor(scope?: EffectScope, direction?: EffectDirection) 271 272ScaleSymbolEffect的构造函数，缩放动效。 273 274**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 275 276**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 277 278**系统能力：** SystemCapability.ArkUI.ArkUI.Full 279 280**参数：** 281 282| 参数名 | 类型 | 必填 | 说明 | 283| ---- | ---- | ---- | ---- | 284| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 285| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 动效方向。<br/>默认值：EffectDirection.DOWN | 286 287## HierarchicalSymbolEffect<sup>12+</sup> 288 289HierarchicalSymbolEffect继承自父类SymbolEffect。 290 291**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 292 293**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 294 295**系统能力：** SystemCapability.ArkUI.ArkUI.Full 296 297### 属性 298 299| 名称 | 类型 | 只读 | 可选 | 说明 | 300| ---- | ---- | ---- | ---- | ---- | 301| fillStyle | [EffectFillStyle](#effectfillstyle12枚举说明) | 否 | 是 | 动效模式。<br/>默认值：EffectFillStyle.CUMULATIVE | 302 303### constructor<sup>12+</sup> 304 305constructor(fillStyle?: EffectFillStyle) 306 307HierarchicalSymbolEffect的构造函数，层级动效。 308 309**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 310 311**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 312 313**系统能力：** SystemCapability.ArkUI.ArkUI.Full 314 315**参数：** 316 317| 参数名 | 类型 | 必填 | 说明 | 318| ---- | ---- | ---- | ---- | 319| fillStyle | [EffectFillStyle](#effectfillstyle12枚举说明) | 否 | 动效模式。<br/>默认值：EffectFillStyle.CUMULATIVE | 320 321## AppearSymbolEffect<sup>12+</sup> 322 323AppearSymbolEffect继承自父类SymbolEffect。 324 325**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 326 327**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 328 329**系统能力：** SystemCapability.ArkUI.ArkUI.Full 330 331### 属性 332 333| 名称 | 类型 | 只读 | 可选 | 说明 | 334| ---- | ---- | ---- | ---- | ---- | 335| scope | [EffectScope](#effectscope12枚举说明) | 否 | 是 | 动效范围。<br/>默认值：EffectScope.LAYER | 336 337### constructor<sup>12+</sup> 338 339constructor(scope?: EffectScope) 340 341AppearSymbolEffect的构造函数，出现动效。 342 343**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 344 345**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 346 347**系统能力：** SystemCapability.ArkUI.ArkUI.Full 348 349**参数：** 350 351| 参数名 | 类型 | 必填 | 说明 | 352| ---- | ---- | ---- | ---- | 353| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 354 355## DisappearSymbolEffect<sup>12+</sup> 356 357DisappearSymbolEffect继承自父类SymbolEffect。 358 359**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 360 361**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 362 363**系统能力：** SystemCapability.ArkUI.ArkUI.Full 364 365### 属性 366 367| 名称 | 类型 | 只读 | 可选 | 说明 | 368| ---- | ---- | ---- | ---- | ---- | 369| scope | [EffectScope](#effectscope12枚举说明) | 否 | 是 | 动效范围。<br/>默认值：EffectScope.LAYER | 370 371### constructor<sup>12+</sup> 372 373constructor(scope?: EffectScope) 374 375DisappearSymbolEffect的构造函数，消失动效。 376 377**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 378 379**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 380 381**系统能力：** SystemCapability.ArkUI.ArkUI.Full 382 383**参数：** 384 385| 参数名 | 类型 | 必填 | 说明 | 386| ---- | ---- | ---- | ---- | 387| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 388 389## BounceSymbolEffect<sup>12+</sup> 390 391BounceSymbolEffect继承自父类SymbolEffect。 392 393**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 394 395**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 396 397**系统能力：** SystemCapability.ArkUI.ArkUI.Full 398 399### 属性 400 401| 名称 | 类型 | 只读 | 可选 | 说明 | 402| ---- | ---- | ---- | ---- | ---- | 403| scope | [EffectScope](#effectscope12枚举说明) | 否 | 是 | 动效范围。<br/>默认值：EffectScope.LAYER | 404| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 是 | 动效方向。<br/>默认值：EffectDirection.DOWN | 405 406### constructor<sup>12+</sup> 407 408constructor(scope?: EffectScope, direction?: EffectDirection) 409 410BounceSymbolEffect的构造函数，弹跳动效。 411 412**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 413 414**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 415 416**系统能力：** SystemCapability.ArkUI.ArkUI.Full 417 418**参数：** 419 420| 参数名 | 类型 | 必填 | 说明 | 421| ---- | ---- | ---- | ---- | 422| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 423| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 动效方向。<br/>默认值：EffectDirection.DOWN | 424 425## ReplaceSymbolEffect<sup>12+</sup> 426 427ReplaceSymbolEffect继承自父类SymbolEffect。 428 429**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 430 431**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 432 433**系统能力：** SystemCapability.ArkUI.ArkUI.Full 434 435### 属性 436 437**系统能力：** SystemCapability.ArkUI.ArkUI.Full 438 439| 名称 | 类型 | 只读 | 可选 | 说明 | 440| ---- | ---- | ---- | ---- | ---- | 441| scope | [EffectScope](#effectscope12枚举说明) | 否 | 是 | 动效范围。<br/>默认值：EffectScope.LAYER <br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 442| replaceType<sup>20+</sup> | [ReplaceEffectType](#replaceeffecttype20枚举说明) | 否 | 是 | 替换动效类型。<br/>默认值：ReplaceEffectType.SEQUENTIAL <br/>**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 <br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 443 444### constructor<sup>12+</sup> 445 446constructor(scope?: EffectScope) 447 448ReplaceSymbolEffect的构造函数，替换动效。 449 450**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 451 452**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 453 454**系统能力：** SystemCapability.ArkUI.ArkUI.Full 455 456**参数：** 457 458| 参数名 | 类型 | 必填 | 说明 | 459| ---- | ---- | ---- | ---- | 460| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 461 462### constructor<sup>20+</sup> 463 464constructor(scope?: EffectScope, replaceType?: ReplaceEffectType) 465 466ReplaceSymbolEffect的构造函数，替换动效。 467 468**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 469 470**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 471 472**系统能力：** SystemCapability.ArkUI.ArkUI.Full 473 474**参数：** 475 476| 参数名 | 类型 | 必填 | 说明 | 477| ---- | ---- | ---- | ---- | 478| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 479| replaceType | [ReplaceEffectType](#replaceeffecttype20枚举说明) | 否 | 替换动效类型。<br/>默认值：ReplaceEffectType.SEQUENTIAL | 480 481## SymbolEffectStrategy<sup>11+</sup>枚举说明 482 483动效类型的枚举值。设置动效后，动效启动即生效，无需触发。 484 485**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 486 487**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 488 489**系统能力：** SystemCapability.ArkUI.ArkUI.Full 490 491| 名称 | 值 | 说明 | 492| ------ | --- | ----------------------------- | 493| NONE | 0 | 无动效（默认值）。 | 494| SCALE | 1 | 整体缩放动效。 | 495| HIERARCHICAL | 2 | 层级动效。 | 496 497## SymbolRenderingStrategy<sup>11+</sup>枚举说明 498 499渲染模式的枚举值。 500 501**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 502 503**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 504 505**系统能力：** SystemCapability.ArkUI.ArkUI.Full 506 507| 名称 | 值 | 说明 | 508| ------ | --- | ----------------------------- | 509| SINGLE | 0 | 单色模式（默认值）。<br/> 可以设置一个或者多个颜色，默认为黑色。<br/> 当设置多个颜色时，仅生效第一个颜色。 | 510| MULTIPLE_COLOR | 1 | 多色模式。<br/> 最多可以设置三个颜色。当只设置一个颜色时，修改symbol图标的第一层颜色，其他颜色保持默认颜色。<br/> 颜色设置顺序与图标分层顺序匹配，当颜色数量大于图标分层时，多余的颜色不生效。<br/> 仅支持设置颜色，设置透明度设置不生效。| 511| MULTIPLE_OPACITY | 2 | 分层模式。<br/> 默认为黑色，可以设置一个或者多个颜色。当设置多个颜色时，仅生效第一个颜色。<br/>不透明度与图层相关，symbol图标的第一层透明度为100%、第二层透明度为50%、第三层透明度为20%。 | 512 513## SymbolEffect<sup>12+</sup>对象说明 514 515定义SymbolEffect类。 516 517**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 518 519**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 520 521**系统能力：** SystemCapability.ArkUI.ArkUI.Full 522 523## PulseSymbolEffect<sup>12+</sup>对象说明 524 525PulseSymbolEffect继承自父类SymbolEffect，脉冲动效。 526 527**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 528 529**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 530 531**系统能力：** SystemCapability.ArkUI.ArkUI.Full 532 533## EffectDirection<sup>12+</sup>枚举说明 534 535**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 536 537**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 538 539**系统能力：** SystemCapability.ArkUI.ArkUI.Full 540 541| 名称 | 值 | 说明 | 542| ---- | ---- | ---------------- | 543| DOWN | 0 | 图标缩小再复原。 | 544| UP | 1 | 图标放大再复原。 | 545 546## EffectScope<sup>12+</sup>枚举说明 547 548**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 549 550**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 551 552**系统能力：** SystemCapability.ArkUI.ArkUI.Full 553 554| 名称 | 值 | 说明 | 555| ----- | ---- | ---------- | 556| LAYER | 0 | 分层模式。 | 557| WHOLE | 1 | 整体模式。 | 558 559## EffectFillStyle<sup>12+</sup>枚举说明 560 561**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 562 563**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 564 565**系统能力：** SystemCapability.ArkUI.ArkUI.Full 566 567| 名称 | 值 | 说明 | 568| ---------- | ---- | ---------- | 569| CUMULATIVE | 0 | 累加模式。 | 570| ITERATIVE | 1 | 迭代模式。 | 571 572## ReplaceEffectType<sup>20+</sup>枚举说明 573 574替换动效类型的枚举值。 575 576**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 577 578**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 579 580**系统能力：** SystemCapability.ArkUI.ArkUI.Full 581 582| 名称 | 值 | 说明 | 583| ---------- | ---- | ---------- | 584| SEQUENTIAL | 0 | 默认替换动效：当前symbol完全消失后，新symbol出现。 | 585| CROSS_FADE | 1 | 快速替换动效：当前symbol淡出的同时，新symbol淡入，产生更流畅、更快速的过渡效果。| 586| SLASH_OVERLAY | 2 | 禁用动效：用带有斜杠遮罩层的symbol替换当前symbol，通常用于表示禁用或非活动状态。| 587 588## 事件 589 590支持[通用事件](ts-component-general-events.md)。 591 592## 示例 593 594### 示例1（设置渲染和动效策略） 595 596从API version 11开始，该示例通过[renderingStrategy](#renderingstrategy)、[effectStrategy](#effectstrategy)属性展示了不同的渲染和动效策略。 597 598```ts 599// xxx.ets 600@Entry 601@Component 602struct Index { 603 build() { 604 Column() { 605 Row() { 606 Column() { 607 Text("Light") 608 SymbolGlyph($r('sys.symbol.ohos_trash')) 609 .fontWeight(FontWeight.Lighter) 610 .fontSize(96) 611 } 612 613 Column() { 614 Text("Normal") 615 SymbolGlyph($r('sys.symbol.ohos_trash')) 616 .fontWeight(FontWeight.Normal) 617 .fontSize(96) 618 } 619 620 Column() { 621 Text("Bold") 622 SymbolGlyph($r('sys.symbol.ohos_trash')) 623 .fontWeight(FontWeight.Bold) 624 .fontSize(96) 625 } 626 } 627 628 Row() { 629 Column() { 630 Text("单色") 631 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 632 .fontSize(96) 633 .renderingStrategy(SymbolRenderingStrategy.SINGLE) 634 .fontColor([Color.Black, Color.Green, Color.White]) 635 } 636 637 Column() { 638 Text("多色") 639 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 640 .fontSize(96) 641 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) 642 .fontColor([Color.Black, Color.Green, Color.White]) 643 } 644 645 Column() { 646 Text("分层") 647 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 648 .fontSize(96) 649 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 650 .fontColor([Color.Black, Color.Green, Color.White]) 651 } 652 } 653 654 Row() { 655 Column() { 656 Text("无动效") 657 SymbolGlyph($r('sys.symbol.ohos_wifi')) 658 .fontSize(96) 659 .effectStrategy(SymbolEffectStrategy.NONE) 660 } 661 662 Column() { 663 Text("整体缩放动效") 664 SymbolGlyph($r('sys.symbol.ohos_wifi')) 665 .fontSize(96) 666 .effectStrategy(SymbolEffectStrategy.SCALE) 667 } 668 669 Column() { 670 Text("层级动效") 671 SymbolGlyph($r('sys.symbol.ohos_wifi')) 672 .fontSize(96) 673 .effectStrategy(SymbolEffectStrategy.HIERARCHICAL) 674 } 675 } 676 } 677 } 678} 679``` 680 681 682### 示例2（设置动效和阴影） 683 684从API version 12开始，该示例通过[symbolEffect](#symboleffect12)属性展示了各种动效的效果以及结合[symbolShadow](#symbolshadow20)（从API version 20开始）的阴影效果。 685 686```ts 687// xxx.ets 688@Entry 689@Component 690struct Index { 691 @State isActive: boolean = true; 692 @State triggerValueReplace: number = 0; 693 @State triggerValueReplace1: number = 0; 694 @State triggerValueReplace2: number = 0; 695 @State renderMode: number = 1; 696 697 replaceFlag: boolean = true; 698 replaceFlag1: boolean = true; 699 replaceFlag2: boolean = true; 700 701 options: ShadowOptions = { 702 radius: 10.0, 703 color: Color.Blue, 704 offsetX: 10, 705 offsetY: 10, 706 }; 707 708 build() { 709 Column() { 710 Row() { 711 Column() { 712 Text("可变颜色动效") 713 SymbolGlyph($r('sys.symbol.ohos_wifi')) 714 .fontSize(96) 715 .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive) 716 Button(this.isActive ? '关闭' : '播放') 717 .onClick(() => { 718 this.isActive = !this.isActive; 719 }) 720 } 721 .margin({ right: 20 }) 722 Column() { 723 Text("替换动效") 724 SymbolGlyph(this.replaceFlag ? $r('sys.symbol.checkmark_circle') : $r('sys.symbol.repeat_1')) 725 .fontSize(96) 726 .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace) 727 Button('trigger') 728 .onClick(() => { 729 this.replaceFlag = !this.replaceFlag; 730 this.triggerValueReplace = this.triggerValueReplace + 1; 731 }) 732 } 733 .margin({ right: 20 }) 734 } 735 736 Row() { 737 Column() { 738 Text("禁用动效") 739 SymbolGlyph(this.replaceFlag1 ? $r('sys.symbol.eye_slash') : $r('sys.symbol.eye')) 740 .fontSize(96) 741 .renderingStrategy(this.renderMode) 742 .symbolEffect(new ReplaceSymbolEffect(EffectScope.LAYER, ReplaceEffectType.SLASH_OVERLAY), this.triggerValueReplace1) 743 Button('trigger') 744 .onClick(() => { 745 this.replaceFlag1 = !this.replaceFlag1; 746 this.triggerValueReplace1 = this.triggerValueReplace1 + 1; 747 }) 748 } 749 .margin({ right: 20 }) 750 Column() { 751 Text("快速替换动效") 752 SymbolGlyph(this.replaceFlag2 ? $r('sys.symbol.checkmark_circle') : $r('sys.symbol.repeat_1')) 753 .fontSize(96) 754 .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE, ReplaceEffectType.CROSS_FADE), this.triggerValueReplace2) 755 Button('trigger') 756 .onClick(() => { 757 this.replaceFlag2 = !this.replaceFlag2; 758 this.triggerValueReplace2 = this.triggerValueReplace2 + 1; 759 }) 760 } 761 .margin({ right: 20 }) 762 Column() { 763 Text("阴影能力") 764 SymbolGlyph($r('sys.symbol.ohos_wifi')) 765 .fontSize(96) 766 .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive) 767 .symbolShadow(this.options) 768 Button(this.isActive ? '关闭' : '播放') 769 .onClick(() => { 770 this.isActive = !this.isActive; 771 }) 772 } 773 .margin({ right: 20 }) 774 } 775 } 776 .margin({ 777 left: 45, 778 top: 50 779 }) 780 } 781} 782``` 783 784 785### 示例3（设置颜色渐变） 786 787从API version 20开始，该示例通过[shaderStyle](#shaderstyle20)接口实现了symbolGlyph组件显示为渐变色的功能。 788 789```ts 790@Entry 791@Component 792struct Index { 793 @State message: string = 'Hello World'; 794 795 linearGradientOptions1: LinearGradientOptions = { 796 angle: 45, 797 colors: [[Color.Red, 0.0], [Color.Blue, 0.3], [Color.Green, 0.5]] 798 }; 799 800 linearGradientOptions2: LinearGradientOptions = { 801 direction: GradientDirection.LeftTop, 802 colors: [[Color.Red, 0.0], [Color.Blue, 0.3], [Color.Green, 0.5]], 803 repeating: true, 804 }; 805 806 radialGradientOptions: RadialGradientOptions = { 807 center: ["50%", "50%"], 808 radius: "20%", 809 colors: [[Color.Red, 0.0], [Color.Blue, 0.3], [Color.Green, 0.5]], 810 repeating: true, 811 }; 812 813 build() { 814 Column() { 815 Row() { 816 Column() { 817 Text('angle为45°的线性渐变') 818 .fontSize(18) 819 .fontColor(0xCCCCCC) 820 .textAlign(TextAlign.Center) 821 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 822 .fontSize(96) 823 .shaderStyle([new LinearGradientStyle(this.linearGradientOptions1)]) 824 } 825 .margin({ right: 20 }) 826 Column() { 827 Text('LeftTop的线性渐变') 828 .fontSize(18) 829 .fontColor(0xCCCCCC) 830 .textAlign(TextAlign.Center) 831 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 832 .fontSize(96) 833 .shaderStyle([new LinearGradientStyle(this.linearGradientOptions2)]) 834 } 835 .margin({ right: 20 }) 836 } 837 838 Row() { 839 Column() { 840 Text('径向渐变') 841 .fontSize(18) 842 .fontColor(0xCCCCCC) 843 .textAlign(TextAlign.Center) 844 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 845 .fontSize(96) 846 .shaderStyle([new RadialGradientStyle(this.radialGradientOptions)]) 847 } 848 .margin({ right: 20 }) 849 Column() { 850 Text('纯色') 851 .fontSize(18) 852 .fontColor(0xCCCCCC) 853 .textAlign(TextAlign.Center) 854 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 855 .fontSize(96) 856 .shaderStyle([new ColorShaderStyle(Color.Red)]) 857 } 858 .margin({ right: 20 }) 859 Column() { 860 Text('线性和径向渐变') 861 .fontSize(18) 862 .fontColor(0xCCCCCC) 863 .textAlign(TextAlign.Center) 864 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 865 .fontSize(96) 866 .shaderStyle([ 867 new LinearGradientStyle(this.linearGradientOptions2), 868 new LinearGradientStyle(this.linearGradientOptions2), 869 new RadialGradientStyle(this.radialGradientOptions) 870 ]) 871 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 872 } 873 .margin({ right: 20 }) 874 } 875 876 Row() { 877 Column() { 878 Text('数组单层渐变') 879 .fontSize(18) 880 .fontColor(0xCCCCCC) 881 .textAlign(TextAlign.Center) 882 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 883 .fontSize(96) 884 .shaderStyle([ 885 new LinearGradientStyle(this.linearGradientOptions2), 886 ]) 887 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 888 }.margin({ right: 20 }) 889 890 Column() { 891 Text('非数组覆盖全部') 892 .fontSize(18) 893 .fontColor(0xCCCCCC) 894 .textAlign(TextAlign.Center) 895 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 896 .fontSize(96) 897 .shaderStyle(new RadialGradientStyle(this.radialGradientOptions)) 898 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 899 }.margin({ right: 20 }) 900 901 Column() { 902 Text('首层为默认') 903 .fontSize(18) 904 .fontColor(0xCCCCCC) 905 .textAlign(TextAlign.Center) 906 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 907 .fontSize(96) 908 .shaderStyle([ 909 undefined, 910 new LinearGradientStyle(this.linearGradientOptions2), 911 ]) 912 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 913 }.margin({ right: 20 }) 914 } 915 } 916 .margin({ 917 left: 20, 918 top: 50 919 }) 920 } 921} 922``` 923
