1# SymbolGlyph 2 3显示图标小符号的组件。 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-universal-attributes-size.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组件大小。 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/>默认值：系统默认值。 | 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/>默认值：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## SymbolEffect<sup>12+</sup>对象说明 178 179定义SymbolEffect类。 180 181**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 182 183**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 184 185**系统能力：** SystemCapability.ArkUI.ArkUI.Full 186 187### constructor<sup>12+</sup> 188 189constructor() 190 191SymbolEffect的构造函数，无动效。 192 193**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 194 195**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 196 197**系统能力：** SystemCapability.ArkUI.ArkUI.Full 198 199## ScaleSymbolEffect<sup>12+</sup>对象说明 200 201ScaleSymbolEffect继承自父类SymbolEffect。 202 203**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 204 205**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 206 207**系统能力：** SystemCapability.ArkUI.ArkUI.Full 208 209### 属性 210 211| 名称 | 类型 | 必填 | 说明 | 212| ---- | ---- | ---- | ---- | 213| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 214| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 动效方向。<br/>默认值：EffectDirection.DOWN | 215 216### constructor<sup>12+</sup> 217 218constructor(scope?: EffectScope, direction?: EffectDirection) 219 220ScaleSymbolEffect的构造函数，缩放动效。 221 222**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 223 224**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 225 226**系统能力：** SystemCapability.ArkUI.ArkUI.Full 227 228**参数：** 229 230| 参数名 | 类型 | 必填 | 说明 | 231| ---- | ---- | ---- | ---- | 232| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 233| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 动效方向。<br/>默认值：EffectDirection.DOWN | 234 235## HierarchicalSymbolEffect<sup>12+</sup>对象说明 236 237HierarchicalSymbolEffect继承自父类SymbolEffect。 238 239**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 240 241**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 242 243**系统能力：** SystemCapability.ArkUI.ArkUI.Full 244 245### 属性 246 247| 名称 | 类型 | 必填 | 说明 | 248| ---- | ---- | ---- | ---- | 249| fillStyle | [EffectFillStyle](#effectfillstyle12枚举说明) | 否 | 动效模式。<br/>默认值：EffectFillStyle.CUMULATIVE | 250 251### constructor<sup>12+</sup> 252 253constructor(fillStyle?: EffectFillStyle) 254 255HierarchicalSymbolEffect的构造函数，层级动效。 256 257**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 258 259**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 260 261**系统能力：** SystemCapability.ArkUI.ArkUI.Full 262 263**参数：** 264 265| 参数名 | 类型 | 必填 | 说明 | 266| ---- | ---- | ---- | ---- | 267| fillStyle | [EffectFillStyle](#effectfillstyle12枚举说明) | 否 | 动效模式。<br/>默认值：EffectFillStyle.CUMULATIVE | 268 269## AppearSymbolEffect<sup>12+</sup>对象说明 270 271AppearSymbolEffect继承自父类SymbolEffect。 272 273**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 274 275**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 276 277**系统能力：** SystemCapability.ArkUI.ArkUI.Full 278 279### 属性 280 281| 名称 | 类型 | 必填 | 说明 | 282| ---- | ---- | ---- | ---- | 283| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 284 285### constructor<sup>12+</sup> 286 287constructor(scope?: EffectScope) 288 289AppearSymbolEffect的构造函数，出现动效。 290 291**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 292 293**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 294 295**系统能力：** SystemCapability.ArkUI.ArkUI.Full 296 297**参数：** 298 299| 参数名 | 类型 | 必填 | 说明 | 300| ---- | ---- | ---- | ---- | 301| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 302 303## DisappearSymbolEffect<sup>12+</sup>对象说明 304 305DisappearSymbolEffect继承自父类SymbolEffect。 306 307**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 308 309**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 310 311**系统能力：** SystemCapability.ArkUI.ArkUI.Full 312 313### 属性 314 315| 名称 | 类型 | 必填 | 说明 | 316| ---- | ---- | ---- | ---- | 317| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 318 319### constructor<sup>12+</sup> 320 321constructor(scope?: EffectScope) 322 323DisappearSymbolEffect的构造函数，消失动效。 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## BounceSymbolEffect<sup>12+</sup>对象说明 338 339BounceSymbolEffect继承自父类SymbolEffect。 340 341**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 342 343**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 344 345**系统能力：** SystemCapability.ArkUI.ArkUI.Full 346 347### 属性 348 349| 名称 | 类型 | 必填 | 说明 | 350| ---- | ---- | ---- | ---- | 351| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 352| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 动效方向。<br/>默认值：EffectDirection.DOWN | 353 354### constructor<sup>12+</sup> 355 356constructor(scope?: EffectScope, direction?: EffectDirection) 357 358BounceSymbolEffect的构造函数，弹跳动效。 359 360**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 361 362**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 363 364**系统能力：** SystemCapability.ArkUI.ArkUI.Full 365 366**参数：** 367 368| 参数名 | 类型 | 必填 | 说明 | 369| ---- | ---- | ---- | ---- | 370| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 371| direction | [EffectDirection](#effectdirection12枚举说明) | 否 | 动效方向。<br/>默认值：EffectDirection.DOWN | 372 373## ReplaceSymbolEffect<sup>12+</sup>对象说明 374 375ReplaceSymbolEffect继承自父类SymbolEffect。 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### constructor<sup>12+</sup> 390 391constructor(scope?: EffectScope) 392 393ReplaceSymbolEffect的构造函数，替换动效。 394 395**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 396 397**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 398 399**系统能力：** SystemCapability.ArkUI.ArkUI.Full 400 401**参数：** 402 403| 参数名 | 类型 | 必填 | 说明 | 404| ---- | ---- | ---- | ---- | 405| scope | [EffectScope](#effectscope12枚举说明) | 否 | 动效范围。<br/>默认值：EffectScope.LAYER | 406 407## PulseSymbolEffect<sup>12+</sup>对象说明 408 409### constructor<sup>12+</sup> 410 411constructor() 412 413PulseSymbolEffect的构造函数，脉冲动效。 414 415**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 416 417**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 418 419**系统能力：** SystemCapability.ArkUI.ArkUI.Full 420 421## EffectDirection<sup>12+</sup>枚举说明 422 423**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 424 425**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 426 427**系统能力：** SystemCapability.ArkUI.ArkUI.Full 428 429| 名称 | 值 | 说明 | 430| ---- | ---- | ---------------- | 431| DOWN | 0 | 图标缩小再复原。 | 432| UP | 1 | 图标放大再复原。 | 433 434## EffectScope<sup>12+</sup>枚举说明 435 436**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 437 438**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 439 440**系统能力：** SystemCapability.ArkUI.ArkUI.Full 441 442| 名称 | 值 | 说明 | 443| ----- | ---- | ---------- | 444| LAYER | 0 | 分层模式。 | 445| WHOLE | 1 | 整体模式。 | 446 447## EffectFillStyle<sup>12+</sup>枚举说明 448 449**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 450 451**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 452 453**系统能力：** SystemCapability.ArkUI.ArkUI.Full 454 455| 名称 | 值 | 说明 | 456| ---------- | ---- | ---------- | 457| CUMULATIVE | 0 | 累加模式。 | 458| ITERATIVE | 1 | 迭代模式。 | 459 460## SymbolEffectStrategy<sup>11+</sup>枚举说明 461 462动效类型的枚举值。设置动效后启动即生效，无需触发。 463 464**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 465 466**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 467 468**系统能力：** SystemCapability.ArkUI.ArkUI.Full 469 470| 名称 | 说明 | 471| ------ | ----------------------------- | 472| NONE | 无动效（默认值）。 | 473| SCALE | 整体缩放动效。 | 474| HIERARCHICAL | 层级动效。 | 475 476## SymbolRenderingStrategy<sup>11+</sup>枚举说明 477 478渲染模式的枚举值。 479 480**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 481 482**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 483 484**系统能力：** SystemCapability.ArkUI.ArkUI.Full 485 486| 名称 | 说明 | 487| ------ | ----------------------------- | 488| SINGLE | 单色模式（默认值）。<br/> 默认为黑色，可以设置一个颜色。<br/> 当用户设置多个颜色时，仅生效第一个颜色。 | 489| MULTIPLE_COLOR | 多色模式。<br/> 最多可以设置三个颜色。当用户只设置一个颜色时，修改第一层颜色，其他颜色保持默认颜色。<br/> 颜色设置顺序与图标分层顺序匹配，当颜色数量大于图标分层时，多余的颜色不生效。<br/> 仅支持设置颜色，不透明度设置不生效。| 490| MULTIPLE_OPACITY | 分层模式。<br/> 默认为黑色，可以设置一个颜色。当用户设置多个颜色时，仅生效第一个颜色。<br/> 不透明度与图层相关，第一层100%、第二层50%、第三层20%。 | 491 492## 事件 493 494支持[通用事件](ts-universal-events-click.md)。 495 496## 示例 497 498### 示例1 499 500```ts 501// xxx.ets 502@Entry 503@Component 504struct Index { 505 build() { 506 Column() { 507 Row() { 508 Column() { 509 Text("Light") 510 SymbolGlyph($r('sys.symbol.ohos_trash')) 511 .fontWeight(FontWeight.Lighter) 512 .fontSize(96) 513 } 514 515 Column() { 516 Text("Normal") 517 SymbolGlyph($r('sys.symbol.ohos_trash')) 518 .fontWeight(FontWeight.Normal) 519 .fontSize(96) 520 } 521 522 Column() { 523 Text("Bold") 524 SymbolGlyph($r('sys.symbol.ohos_trash')) 525 .fontWeight(FontWeight.Bold) 526 .fontSize(96) 527 } 528 } 529 530 Row() { 531 Column() { 532 Text("单色") 533 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 534 .fontSize(96) 535 .renderingStrategy(SymbolRenderingStrategy.SINGLE) 536 .fontColor([Color.Black, Color.Green, Color.White]) 537 } 538 539 Column() { 540 Text("多色") 541 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 542 .fontSize(96) 543 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) 544 .fontColor([Color.Black, Color.Green, Color.White]) 545 } 546 547 Column() { 548 Text("分层") 549 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 550 .fontSize(96) 551 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 552 .fontColor([Color.Black, Color.Green, Color.White]) 553 } 554 } 555 556 Row() { 557 Column() { 558 Text("无动效") 559 SymbolGlyph($r('sys.symbol.ohos_wifi')) 560 .fontSize(96) 561 .effectStrategy(SymbolEffectStrategy.NONE) 562 } 563 564 Column() { 565 Text("整体缩放动效") 566 SymbolGlyph($r('sys.symbol.ohos_wifi')) 567 .fontSize(96) 568 .effectStrategy(1) 569 } 570 571 Column() { 572 Text("层级动效") 573 SymbolGlyph($r('sys.symbol.ohos_wifi')) 574 .fontSize(96) 575 .effectStrategy(2) 576 } 577 } 578 } 579 } 580} 581``` 582 583 584### 示例2 585 586SymbolGlyph使用symbolEffect属性实现可变颜色动效和替换动效。 587 588```ts 589// xxx.ets 590@Entry 591@Component 592struct Index { 593 @State isActive: boolean = true; 594 @State triggerValueReplace: number = 0; 595 replaceFlag: boolean = true; 596 597 build() { 598 Column() { 599 Row() { 600 Column() { 601 Text("可变颜色动效") 602 SymbolGlyph($r('sys.symbol.ohos_wifi')) 603 .fontSize(96) 604 .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive) 605 Button(this.isActive ? '关闭' : '播放').onClick(() => { 606 this.isActive = !this.isActive; 607 }) 608 }.margin({right:20}) 609 610 Column() { 611 Text("替换动效") 612 SymbolGlyph(this.replaceFlag ? $r('sys.symbol.checkmark_circle') : $r('sys.symbol.repeat_1')) 613 .fontSize(96) 614 .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace) 615 Button('trigger').onClick(() => { 616 this.replaceFlag = !this.replaceFlag; 617 this.triggerValueReplace = this.triggerValueReplace + 1; 618 }) 619 } 620 } 621 }.margin({ 622 left:30, 623 top:50 624 }) 625 } 626} 627``` 628
