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**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 22 23**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28 29| 参数名 | 类型 | 必填 | 说明 | 30| -------- | -------- | -------- | -------- | 31| value | [Resource](ts-types.md#resource)| 是 | SymbolSpan组件的资源名，如 $r('sys.symbol.ohos_wifi')。 | 32 33> **说明：** 34> 35> $r('sys.symbol.ohos_wifi')中引用的资源为系统预置，SymbolSpan仅支持系统预置的symbol资源名，引用非symbol资源将显示异常。 36 37## 属性 38 39不支持[通用属性](ts-component-general-attributes.md)，支持以下属性： 40 41### fontColor 42 43fontColor(value: Array<ResourceColor>) 44 45设置SymbolSpan组件颜色。 46 47**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 48 49**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53**参数：** 54 55| 参数名 | 类型 | 必填 | 说明 | 56| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 57| value | Array\<[ResourceColor](ts-types.md#resourcecolor)\> | 是 | SymbolSpan组件颜色。<br/> 默认值：不同渲染策略下默认值不同。 | 58 59### fontSize 60 61fontSize(value: number | string | Resource) 62 63设置SymbolSpan组件大小。设置string类型时，支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。 64 65**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 66 67**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 68 69**系统能力：** SystemCapability.ArkUI.ArkUI.Full 70 71**参数：** 72 73| 参数名 | 类型 | 必填 | 说明 | 74| ------ | ------------------------------------------------------------ | ---- | --------------------------------------------- | 75| value | number \| string \| [Resource](ts-types.md#resource) | 是 | SymbolSpan组件大小。<br/>默认值：16fp<br/>单位：fp | 76 77### fontWeight 78 79fontWeight(value: number | FontWeight | string) 80 81设置SymbolSpan组件粗细。number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。 82 83sys.symbol.ohos_lungs图标不支持设置fontWeight。 84 85**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 86 87**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 88 89**系统能力：** SystemCapability.ArkUI.ArkUI.Full 90 91**参数：** 92 93| 参数名 | 类型 | 必填 | 说明 | 94| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------------- | 95| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 是 | SymbolSpan组件粗细。<br/>默认值：FontWeight.Normal | 96 97### renderingStrategy 98 99renderingStrategy(value: SymbolRenderingStrategy) 100 101设置SymbolSpan渲染策略。 102 103**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 104 105**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 106 107**系统能力：** SystemCapability.ArkUI.ArkUI.Full 108 109**参数：** 110 111| 参数名 | 类型 | 必填 | 说明 | 112| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 113| value | [SymbolRenderingStrategy](ts-basic-components-symbolGlyph.md#symbolrenderingstrategy11枚举说明) | 是 | SymbolSpan渲染策略。<br/>默认值：SymbolRenderingStrategy.SINGLE | 114 115不同渲染策略效果可参考以下示意图。 116 117 118 119### effectStrategy 120 121effectStrategy(value: SymbolEffectStrategy) 122 123设置SymbolSpan动效策略。 124 125**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 126 127**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 128 129**系统能力：** SystemCapability.ArkUI.ArkUI.Full 130 131**参数：** 132 133| 参数名 | 类型 | 必填 | 说明 | 134| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------------- | 135| value | [SymbolEffectStrategy](ts-basic-components-symbolGlyph.md#symboleffectstrategy11枚举说明) | 是 | SymbolSpan动效策略。<br/>默认值：SymbolEffectStrategy.NONE | 136 137### attributeModifier<sup>12+</sup> 138 139attributeModifier(modifier: AttributeModifier\<SymbolSpanAttribute>) 140 141设置组件的动态属性。 142 143**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 144 145**系统能力：** SystemCapability.ArkUI.ArkUI.Full 146 147**参数：** 148 149| 参数名 | 类型 | 必填 | 说明 | 150| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 151| modifier | [AttributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifiert)\<SymbolSpanAttribute> | 是 | 动态设置组件的属性。 | 152 153## 事件 154 155不支持[通用事件](ts-component-general-events.md)。 156 157## 示例 158 159### 示例1（设置渲染和动效策略） 160该示例通过renderingStrategy、effectStrategy属性展示了不同的渲染和动效策略。 161 162```ts 163// xxx.ets 164@Entry 165@Component 166struct Index { 167 build() { 168 Column() { 169 Row() { 170 Column() { 171 Text("Light") 172 Text() { 173 SymbolSpan($r('sys.symbol.ohos_trash')) 174 .fontWeight(FontWeight.Lighter) 175 .fontSize(96) 176 } 177 } 178 179 Column() { 180 Text("Normal") 181 Text() { 182 SymbolSpan($r('sys.symbol.ohos_trash')) 183 .fontWeight(FontWeight.Normal) 184 .fontSize(96) 185 } 186 } 187 188 Column() { 189 Text("Bold") 190 Text() { 191 SymbolSpan($r('sys.symbol.ohos_trash')) 192 .fontWeight(FontWeight.Bold) 193 .fontSize(96) 194 } 195 } 196 } 197 198 Row() { 199 Column() { 200 Text("单色") 201 Text() { 202 SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) 203 .fontSize(96) 204 .renderingStrategy(SymbolRenderingStrategy.SINGLE) 205 .fontColor([Color.Black, Color.Green, Color.White]) 206 } 207 } 208 209 Column() { 210 Text("多色") 211 Text() { 212 SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) 213 .fontSize(96) 214 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) 215 .fontColor([Color.Black, Color.Green, Color.White]) 216 } 217 } 218 219 Column() { 220 Text("分层") 221 Text() { 222 SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) 223 .fontSize(96) 224 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 225 .fontColor([Color.Black, Color.Green, Color.White]) 226 } 227 } 228 } 229 230 Row() { 231 Column() { 232 Text("无动效") 233 Text() { 234 SymbolSpan($r('sys.symbol.ohos_wifi')) 235 .fontSize(96) 236 .effectStrategy(SymbolEffectStrategy.NONE) 237 } 238 } 239 240 Column() { 241 Text("整体缩放动效") 242 Text() { 243 SymbolSpan($r('sys.symbol.ohos_wifi')) 244 .fontSize(96) 245 .effectStrategy(1) 246 } 247 } 248 249 Column() { 250 Text("层级动效") 251 Text() { 252 SymbolSpan($r('sys.symbol.ohos_wifi')) 253 .fontSize(96) 254 .effectStrategy(2) 255 } 256 } 257 } 258 } 259 } 260} 261``` 262 263 264### 示例2（设置动态属性） 265该示例通过attributeModifier属性创建指定样式图标。 266 267```ts 268import { SymbolSpanModifier } from '@kit.ArkUI'; 269 270@Entry 271@Component 272struct Index { 273 @State modifier: SymbolSpanModifier = 274 new SymbolSpanModifier($r("sys.symbol.ohos_wifi")).fontColor([Color.Blue]).fontSize(100); 275 276 build() { 277 Row() { 278 Column() { 279 Text() { 280 SymbolSpan(undefined).attributeModifier(this.modifier) 281 } 282 } 283 .width('100%') 284 } 285 .height('100%') 286 } 287} 288``` 289
