1# SymbolSpan 2 3作为Text组件的子组件，用于显示图标小符号的组件。 4 5> **说明：** 6> 7> - 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> - 该组件支持继承父组件Text的属性，即如果子组件未设置属性且父组件设置属性，则继承父组件设置的全部属性。 10> 11> - SymbolSpan拖拽不会置灰显示。 12 13## 子组件 14 15不支持子组件。 16 17## 接口 18 19SymbolSpan(value: Resource) 20 21**参数：** 22 23| 参数名 | 参数类型 | 必填 | 参数描述 | 24| -------- | -------- | -------- | -------- | 25| value | [Resource](ts-types.md#resource)| 是 | SymbolSpan组件的资源名，如 $r('sys.symbol.ohos_wifi')。 | 26 27> **说明：** 28> 29> $r('sys.symbol.ohos_wifi')中引用的资源为系统预置，SymbolSpan仅支持系统预置的symbol资源名，引用非symbol资源将显示异常。 30 31## 属性 32 33不支持[通用属性](ts-universal-attributes-size.md)，支持以下属性： 34 35| 名称 | 类型 | 必填 | 描述 | 36| ------ | -------- | ---- | -------------------------------------- | 37| fontColor | Array\<[ResourceColor](ts-types.md#resourcecolor)\> | 否 | 设置SymbolSpan组件颜色。<br/> 默认值：不同渲染策略下默认值不同。 | 38| fontSize | number \| string \| [Resource](ts-types.md#resource) | 否 | 设置SymbolSpan组件大小。<br/>默认值：系统默认值。 | 39| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置SymbolSpan组件粗细。<br/>number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。<br/>默认值：FontWeight.Normal。 | 40| renderingStrategy | [SymbolRenderingStrategy](ts-appendix-enums.md#symbolrenderingstrategy11) | 否 | 设置SymbolSpan渲染策略。<br/>默认值：SymbolRenderingStrategy.SINGLE。<br/>**说明：**<br/>$r('sys.symbol.ohos_*')中引用的资源仅ohos_trash_circle、ohos_folder_badge_plus、ohos_lungs支持分层与多色模式。 | 41| effectStrategy | [SymbolEffectStrategy](ts-appendix-enums.md#symboleffectstrategy11) | 否 | 设置SymbolSpan动效策略。<br/>默认值：SymbolEffectStrategy.NONE。<br/>**说明：**<br/>$r('sys.symbol.ohos_*')中引用的资源仅ohos_wifi支持层级动效模式。 | 42 43SymbolSpan多色模式下各个组件的默认颜色与层数展示图。 44 45 46 47## 事件 48 49不支持[通用事件](ts-universal-events-click.md)。 50 51## 示例 52 53```ts 54// xxx.ets 55@Entry 56@Component 57struct Index { 58 @State scaleplay:boolean = false 59 @State hieraplay:boolean = false 60 build() { 61 Column() { 62 Row() { 63 Column(){ 64 Text("细") 65 Text(){ 66 SymbolSpan($r('sys.symbol.ohos_lungs')) 67 .fontWeight(FontWeight.Lighter) 68 .fontSize(96) 69 } 70 } 71 Column(){ 72 Text("标准") 73 Text(){ 74 SymbolSpan($r('sys.symbol.ohos_lungs')) 75 .fontWeight(FontWeight.Normal) 76 .fontSize(96) 77 } 78 } 79 Column(){ 80 Text("粗") 81 Text(){ 82 SymbolSpan($r('sys.symbol.ohos_lungs')) 83 .fontWeight(FontWeight.Bold) 84 .fontSize(96) 85 } 86 } 87 } 88 89 Row() { 90 Column(){ 91 Text("单色") 92 Text(){ 93 SymbolSpan($r('sys.symbol.ohos_lungs')) 94 .fontSize(96) 95 .renderingStrategy(SymbolRenderingStrategy.SINGLE) 96 .fontColor([Color.Blue,Color.Grey,Color.Green]) 97 } 98 } 99 Column(){ 100 Text("多色") 101 Text(){ 102 SymbolSpan($r('sys.symbol.ohos_lungs')) 103 .fontSize(96) 104 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) 105 .fontColor([Color.Blue,Color.Grey,Color.Green]) 106 } 107 } 108 Column(){ 109 Text("透明度") 110 Text(){ 111 SymbolSpan($r('sys.symbol.ohos_lungs')) 112 .fontSize(96) 113 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 114 .fontColor([Color.Blue,Color.Grey,Color.Green]) 115 } 116 } 117 } 118 Row() { 119 Column(){ 120 Text("无动效") 121 Text() { 122 SymbolSpan($r('sys.symbol.ohos_wifi')) 123 .fontSize(96) 124 .effectStrategy(SymbolEffectStrategy.NONE) 125 } 126 } 127 Column(){ 128 Text("整体缩放动效") 129 Text(){ 130 SymbolSpan($r('sys.symbol.ohos_wifi')) 131 .fontSize(96) 132 .effectStrategy(this.scaleplay ? 1 : 0) 133 } 134 Button(this.scaleplay? '关闭':'播放').onClick(()=>{this.scaleplay = !this.scaleplay}) 135 } 136 Column(){ 137 Text("层级动效") 138 Text(){ 139 SymbolSpan($r('sys.symbol.ohos_wifi')) 140 .fontSize(96) 141 .effectStrategy(this.hieraplay ? 2 : 0) 142 } 143 Button(this.hieraplay? '关闭':'播放').onClick(()=>{this.hieraplay = !this.hieraplay}) 144 } 145 } 146 } 147 } 148} 149``` 150
