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