1# SymbolGlyph 2 3显示图标小符号的组件。<!--RP1--><!--RP1End--> 4 5> **说明：** 6> 7> 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11不支持子组件。 12 13## 接口 14 15SymbolGlyph(value?: Resource) 16 17**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 18 19**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 说明 | 26| -------- | -------- | -------- | -------- | 27| value | [Resource](ts-types.md#resource)| 否 | SymbolGlyph组件的资源名，如 $r('sys.symbol.ohos_wifi')。 | 28 29> **说明：** 30> 31> $r('sys.symbol.ohos_wifi')中引用的资源为系统预置，SymbolGlyph仅支持系统预置的symbol资源名，引用非symbol资源将显示异常。 32 33## 属性 34 35支持[通用属性](ts-component-general-attributes.md)，不支持文本通用属性，仅支持以下特有属性： 36 37### fontColor 38 39fontColor(value: Array<ResourceColor>) 40 41设置SymbolGlyph组件颜色。 42 43**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 44 45**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49**参数：** 50 51| 参数名 | 类型 | 必填 | 说明 | 52| ------ | ---- | ---- | ----- | 53| value | Array\<[ResourceColor](ts-types.md#resourcecolor)\> | 是 | SymbolGlyph组件颜色。<br/> 默认值：不同渲染策略下默认值不同。 | 54 55### fontSize 56 57fontSize(value: number | string | Resource) 58 59设置SymbolGlyph组件大小。设置string类型时，支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。 60 61组件的图标显示大小由fontSize控制，设置width或height后，其他通用属性仅对组件的占位大小生效。 62 63**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 64 65**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 66 67**系统能力：** SystemCapability.ArkUI.ArkUI.Full 68 69**参数：** 70 71| 参数名 | 类型 | 必填 | 说明 | 72| ------ | ---- | ---- | ----- | 73| value | number \| string \| [Resource](ts-types.md#resource) | 是 | SymbolGlyph组件大小。<br/>默认值：16fp<br/>单位：fp<br/>不支持设置百分比字符串。| 74 75### fontWeight 76 77fontWeight(value: number | FontWeight | string) 78 79设置SymbolGlyph组件粗细。number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。 80 81sys.symbol.ohos_lungs图标不支持设置fontWeight。 82 83**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 84 85**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 86 87**系统能力：** SystemCapability.ArkUI.ArkUI.Full 88 89**参数：** 90 91| 参数名 | 类型 | 必填 | 说明 | 92| ------ | ------------------------------------------------------------ | ---- | --------------------------------------------------- | 93| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 是 | SymbolGlyph组件粗细。<br/>默认值：FontWeight.Normal | 94 95### renderingStrategy 96 97renderingStrategy(value: SymbolRenderingStrategy) 98 99设置SymbolGlyph组件渲染策略。 100 101**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 102 103**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 104 105**系统能力：** SystemCapability.ArkUI.ArkUI.Full 106 107**参数：** 108 109| 参数名 | 类型 | 必填 | 说明 | 110| ------ | ---- | ---- | ----- | 111| value | [SymbolRenderingStrategy](#symbolrenderingstrategy11枚举说明) | 是 | SymbolGlyph组件渲染策略。<br/>默认值：SymbolRenderingStrategy.SINGLE | 112 113不同渲染策略效果可参考以下示意图。 114 115 116 117### effectStrategy 118 119effectStrategy(value: SymbolEffectStrategy) 120 121设置SymbolGlyph组件动效策略。 122 123**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 124 125**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 126 127**系统能力：** SystemCapability.ArkUI.ArkUI.Full 128 129**参数：** 130 131| 参数名 | 类型 | 必填 | 说明 | 132| ------ | ---- | ---- | ----- | 133| value | [SymbolEffectStrategy](#symboleffectstrategy11枚举说明) | 是 | SymbolGlyph组件动效策略。<br/>默认值：SymbolEffectStrategy.NONE | 134 135### symbolEffect<sup>12+</sup> 136 137symbolEffect(symbolEffect: SymbolEffect, isActive?: boolean) 138 139设置SymbolGlyph组件动效策略及播放状态。 140 141**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 142 143**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 144 145**系统能力：** SystemCapability.ArkUI.ArkUI.Full 146 147**参数：** 148 149| 参数名 | 类型 | 必填 | 说明 | 150| ------ | ---- | ---- | ----- | 151| symbolEffect | [SymbolEffect](#symboleffect12对象说明) | 是 | SymbolGlyph组件动效策略。<br/>默认值：[SymbolEffect](#symboleffect12对象说明) | 152| isActive | boolean | 否 | SymbolGlyph组件动效播放状态。<br/>true表示播放，false表示不播放。<br/>默认值：false | 153 154### symbolEffect<sup>12+</sup> 155 156symbolEffect(symbolEffect: SymbolEffect, triggerValue?: number) 157 158设置SymbolGlyph组件动效策略及播放触发器。 159 160**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 161 162**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 163 164**系统能力：** SystemCapability.ArkUI.ArkUI.Full 165 166**参数：** 167 168| 参数名 | 类型 | 必填 | 说明 | 169| ------ | ---- | ---- | ----- | 170| symbolEffect | [SymbolEffect](#symboleffect12对象说明) | 是 | SymbolGlyph组件动效策略。<br/>默认值：[SymbolEffect](#symboleffect12对象说明) | 171| triggerValue | number | 否 | SymbolGlyph组件动效播放触发器，在数值变更时触发动效。<br/>如果首次不希望触发动效，设置-1。 | 172 173> **说明：** 174> 175> 动效属性，仅支持使用effectStrategy属性或单个symbolEffect属性，不支持多种动效属性混合使用。 176 177### minFontScale<sup>18+</sup> 178 179minFontScale(scale: Optional\<number | Resource>) 180 181设置SymbolGlyph组件最小的字体缩放倍数。 182 183**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 184 185**系统能力：** SystemCapability.ArkUI.ArkUI.Full 186 187**参数：** 188 189| 参数名 | 类型 | 必填 | 说明 | 190| ------ | ---- | ---- | ----- | 191| scale |[Optional](ts-universal-attributes-custom-property.md#optional12)\<number \| [Resource](ts-types.md#resource)> | 是 | SymbolGlyph组件最小的字体缩放倍数。<br/>取值范围：[0, 1] <br/>设置为0，缩放最小。<br/>**说明：** <br/>设置的值小于0时，按值为0处理。设置的值大于1，按值为1处理。异常值默认不生效。 | 192 193### maxFontScale<sup>18+</sup> 194 195maxFontScale(scale: Optional\<number | Resource>) 196 197设置SymbolGlyph组件最大的字体缩放倍数。 198 199**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 200 201**系统能力：** SystemCapability.ArkUI.ArkUI.Full 202 203**参数：** 204 205| 参数名 | 类型 | 必填 | 说明 | 206| ------ | ---- | ---- | ----- | 207| scale |[Optional](ts-universal-attributes-custom-property.md#optional12)\<number \| [Resource](ts-types.md#resource)> | 是 | SymbolGlyph组件最大的字体缩放倍数。<br/>取值范围：[1, +∞)<br/>**说明：** <br/>设置的值小于1时，按值为1处理，异常值默认不生效。 | 208 209## ScaleSymbolEffect<sup>12+</sup> 210 211ScaleSymbolEffect继承自父类SymbolEffect。 212 213**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 214 215**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 216 217**系统能力：** SystemCapability.ArkUI.ArkUI.Full 218 219### 属性 220 221| 名称 | 类型 | 必填 | 说明 | 222| ---- | ---- | ---- | ---- | 223| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 224| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 动效方向。<br/>默认值：EffectDirection.DOWN | 225 226### constructor<sup>12+</sup> 227 228constructor(scope?: EffectScope, direction?: EffectDirection) 229 230ScaleSymbolEffect的构造函数，缩放动效。 231 232**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 233 234**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 235 236**系统能力：** SystemCapability.ArkUI.ArkUI.Full 237 238**参数：** 239 240| 参数名 | 类型 | 必填 | 说明 | 241| ---- | ---- | ---- | ---- | 242| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 243| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 动效方向。<br/>默认值：EffectDirection.DOWN | 244 245## HierarchicalSymbolEffect<sup>12+</sup> 246 247HierarchicalSymbolEffect继承自父类SymbolEffect。 248 249**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 250 251**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 252 253**系统能力：** SystemCapability.ArkUI.ArkUI.Full 254 255### 属性 256 257| 名称 | 类型 | 必填 | 说明 | 258| ---- | ---- | ---- | ---- | 259| fillStyle | [EffectFillStyle](#effectfillstyle12枚举说明) | 否 | 动效模式。<br/>默认值：EffectFillStyle.CUMULATIVE | 260 261### constructor<sup>12+</sup> 262 263constructor(fillStyle?: EffectFillStyle) 264 265HierarchicalSymbolEffect的构造函数，层级动效。 266 267**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 268 269**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 270 271**系统能力：** SystemCapability.ArkUI.ArkUI.Full 272 273**参数：** 274 275| 参数名 | 类型 | 必填 | 说明 | 276| ---- | ---- | ---- | ---- | 277| fillStyle | [EffectFillStyle](#effectfillstyle12枚举说明) | 否 | 动效模式。<br/>默认值：EffectFillStyle.CUMULATIVE | 278 279## AppearSymbolEffect<sup>12+</sup> 280 281AppearSymbolEffect继承自父类SymbolEffect。 282 283**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 284 285**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 286 287**系统能力：** SystemCapability.ArkUI.ArkUI.Full 288 289### 属性 290 291| 名称 | 类型 | 必填 | 说明 | 292| ---- | ---- | ---- | ---- | 293| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 294 295### constructor<sup>12+</sup> 296 297constructor(scope?: EffectScope) 298 299AppearSymbolEffect的构造函数，出现动效。 300 301**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 302 303**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 304 305**系统能力：** SystemCapability.ArkUI.ArkUI.Full 306 307**参数：** 308 309| 参数名 | 类型 | 必填 | 说明 | 310| ---- | ---- | ---- | ---- | 311| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 312 313## DisappearSymbolEffect<sup>12+</sup> 314 315DisappearSymbolEffect继承自父类SymbolEffect。 316 317**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 318 319**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 320 321**系统能力：** SystemCapability.ArkUI.ArkUI.Full 322 323### 属性 324 325| 名称 | 类型 | 必填 | 说明 | 326| ---- | ---- | ---- | ---- | 327| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 328 329### constructor<sup>12+</sup> 330 331constructor(scope?: EffectScope) 332 333DisappearSymbolEffect的构造函数，消失动效。 334 335**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 336 337**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 338 339**系统能力：** SystemCapability.ArkUI.ArkUI.Full 340 341**参数：** 342 343| 参数名 | 类型 | 必填 | 说明 | 344| ---- | ---- | ---- | ---- | 345| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 346 347## BounceSymbolEffect<sup>12+</sup> 348 349BounceSymbolEffect继承自父类SymbolEffect。 350 351**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 352 353**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 354 355**系统能力：** SystemCapability.ArkUI.ArkUI.Full 356 357### 属性 358 359| 名称 | 类型 | 必填 | 说明 | 360| ---- | ---- | ---- | ---- | 361| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 362| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 动效方向。<br/>默认值：EffectDirection.DOWN | 363 364### constructor<sup>12+</sup> 365 366constructor(scope?: EffectScope, direction?: EffectDirection) 367 368BounceSymbolEffect的构造函数，弹跳动效。 369 370**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 371 372**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 373 374**系统能力：** SystemCapability.ArkUI.ArkUI.Full 375 376**参数：** 377 378| 参数名 | 类型 | 必填 | 说明 | 379| ---- | ---- | ---- | ---- | 380| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 381| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 动效方向。<br/>默认值：EffectDirection.DOWN | 382 383## ReplaceSymbolEffect<sup>12+</sup> 384 385ReplaceSymbolEffect继承自父类SymbolEffect。 386 387**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 388 389**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 390 391**系统能力：** SystemCapability.ArkUI.ArkUI.Full 392 393### 属性 394 395| 名称 | 类型 | 必填 | 说明 | 396| ---- | ---- | ---- | ---- | 397| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 398 399### constructor<sup>12+</sup> 400 401constructor(scope?: EffectScope) 402 403ReplaceSymbolEffect的构造函数，替换动效。 404 405**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 406 407**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 408 409**系统能力：** SystemCapability.ArkUI.ArkUI.Full 410 411**参数：** 412 413| 参数名 | 类型 | 必填 | 说明 | 414| ---- | ---- | ---- | ---- | 415| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 416 417## SymbolEffectStrategy<sup>11+</sup>枚举说明 418 419动效类型的枚举值。设置动效后，动效启动即生效，无需触发。 420 421**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 422 423**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 424 425**系统能力：** SystemCapability.ArkUI.ArkUI.Full 426 427| 名称 | 值 | 说明 | 428| ------ | --- | ----------------------------- | 429| NONE | 0 | 无动效（默认值）。 | 430| SCALE | 1 | 整体缩放动效。 | 431| HIERARCHICAL | 2 | 层级动效。 | 432 433## SymbolRenderingStrategy<sup>11+</sup>枚举说明 434 435渲染模式的枚举值。 436 437**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 438 439**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 440 441**系统能力：** SystemCapability.ArkUI.ArkUI.Full 442 443| 名称 | 值 | 说明 | 444| ------ | --- | ----------------------------- | 445| SINGLE | 0 | 单色模式（默认值）。<br/> 可以设置一个或者多个颜色，默认为黑色。<br/> 当设置多个颜色时，仅生效第一个颜色。 | 446| MULTIPLE_COLOR | 1 | 多色模式。<br/> 最多可以设置三个颜色。当只设置一个颜色时，修改symbol图标的第一层颜色，其他颜色保持默认颜色。<br/> 颜色设置顺序与图标分层顺序匹配，当颜色数量大于图标分层时，多余的颜色不生效。<br/> 仅支持设置颜色，设置透明度设置不生效。| 447| MULTIPLE_OPACITY | 2 | 分层模式。<br/> 默认为黑色，可以设置一个或者多个颜色。当设置多个颜色时，仅生效第一个颜色。<br/>不透明度与图层相关，symbol图标的第一层透明度为100%、第二层透明度为50%、第三层透明度为20%。 | 448 449## SymbolEffect<sup>12+</sup>对象说明 450 451定义SymbolEffect类。 452 453**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 454 455**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 456 457**系统能力：** SystemCapability.ArkUI.ArkUI.Full 458 459## PulseSymbolEffect<sup>12+</sup>对象说明 460 461PulseSymbolEffect的构造函数，脉冲动效。 462 463**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 464 465**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 466 467**系统能力：** SystemCapability.ArkUI.ArkUI.Full 468 469## EffectDirection<sup>12+</sup>枚举说明 470 471**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 472 473**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 474 475**系统能力：** SystemCapability.ArkUI.ArkUI.Full 476 477| 名称 | 值 | 说明 | 478| ---- | ---- | ---------------- | 479| DOWN | 0 | 图标缩小再复原。 | 480| UP | 1 | 图标放大再复原。 | 481 482## EffectScope<sup>12+</sup>枚举说明 483 484**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 485 486**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 487 488**系统能力：** SystemCapability.ArkUI.ArkUI.Full 489 490| 名称 | 值 | 说明 | 491| ----- | ---- | ---------- | 492| LAYER | 0 | 分层模式。 | 493| WHOLE | 1 | 整体模式。 | 494 495## EffectFillStyle<sup>12+</sup>枚举说明 496 497**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 498 499**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 500 501**系统能力：** SystemCapability.ArkUI.ArkUI.Full 502 503| 名称 | 值 | 说明 | 504| ---------- | ---- | ---------- | 505| CUMULATIVE | 0 | 累加模式。 | 506| ITERATIVE | 1 | 迭代模式。 | 507 508## 事件 509 510支持[通用事件](ts-component-general-events.md)。 511 512## 示例 513 514### 示例1（设置渲染和动效策略） 515 516该示例通过renderingStrategy、effectStrategy属性展示了不同的渲染和动效策略。 517 518```ts 519// xxx.ets 520@Entry 521@Component 522struct Index { 523 build() { 524 Column() { 525 Row() { 526 Column() { 527 Text("Light") 528 SymbolGlyph($r('sys.symbol.ohos_trash')) 529 .fontWeight(FontWeight.Lighter) 530 .fontSize(96) 531 } 532 533 Column() { 534 Text("Normal") 535 SymbolGlyph($r('sys.symbol.ohos_trash')) 536 .fontWeight(FontWeight.Normal) 537 .fontSize(96) 538 } 539 540 Column() { 541 Text("Bold") 542 SymbolGlyph($r('sys.symbol.ohos_trash')) 543 .fontWeight(FontWeight.Bold) 544 .fontSize(96) 545 } 546 } 547 548 Row() { 549 Column() { 550 Text("单色") 551 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 552 .fontSize(96) 553 .renderingStrategy(SymbolRenderingStrategy.SINGLE) 554 .fontColor([Color.Black, Color.Green, Color.White]) 555 } 556 557 Column() { 558 Text("多色") 559 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 560 .fontSize(96) 561 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) 562 .fontColor([Color.Black, Color.Green, Color.White]) 563 } 564 565 Column() { 566 Text("分层") 567 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 568 .fontSize(96) 569 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 570 .fontColor([Color.Black, Color.Green, Color.White]) 571 } 572 } 573 574 Row() { 575 Column() { 576 Text("无动效") 577 SymbolGlyph($r('sys.symbol.ohos_wifi')) 578 .fontSize(96) 579 .effectStrategy(SymbolEffectStrategy.NONE) 580 } 581 582 Column() { 583 Text("整体缩放动效") 584 SymbolGlyph($r('sys.symbol.ohos_wifi')) 585 .fontSize(96) 586 .effectStrategy(1) 587 } 588 589 Column() { 590 Text("层级动效") 591 SymbolGlyph($r('sys.symbol.ohos_wifi')) 592 .fontSize(96) 593 .effectStrategy(2) 594 } 595 } 596 } 597 } 598} 599``` 600 601 602### 示例2（设置动效） 603 604该示例通过symbolEffect属性展示了可变颜色动效和替换动效的效果。 605 606```ts 607// xxx.ets 608@Entry 609@Component 610struct Index { 611 @State isActive: boolean = true; 612 @State triggerValueReplace: number = 0; 613 replaceFlag: boolean = true; 614 615 build() { 616 Column() { 617 Row() { 618 Column() { 619 Text("可变颜色动效") 620 SymbolGlyph($r('sys.symbol.ohos_wifi')) 621 .fontSize(96) 622 .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive) 623 Button(this.isActive ? '关闭' : '播放').onClick(() => { 624 this.isActive = !this.isActive; 625 }) 626 }.margin({ right: 20 }) 627 628 Column() { 629 Text("替换动效") 630 SymbolGlyph(this.replaceFlag ? $r('sys.symbol.checkmark_circle') : $r('sys.symbol.repeat_1')) 631 .fontSize(96) 632 .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace) 633 Button('trigger').onClick(() => { 634 this.replaceFlag = !this.replaceFlag; 635 this.triggerValueReplace = this.triggerValueReplace + 1; 636 }) 637 } 638 } 639 }.margin({ 640 left: 30, 641 top: 50 642 }) 643 } 644} 645``` 646
