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