1# Styled String 2 3Styled strings are string objects that facilitate the flexible use of text styles. They can be bound to the **Text** component using the [setStyledString](./ts-basic-components-text.md#setstyledstring12) API in **TextController**, and to the **RichEditor** component using the [setStyledString](ts-basic-components-richeditor.md#setstyledstring12) API in **RichEditorStyledStringController**. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> Currently, styled strings cannot be used in worker threads. 10 11## Rules of Use 12 13* If a styled string conflicts with the current style settings in a component, the style set in the styled string takes effect. 14* If a styled string conflicts with the child components in [Text](./ts-basic-components-text.md), the style set in the styled string is applied to the **Text** component, and style settings of the child components, including [Span](./ts-basic-components-span.md), are ignored. 15* @State is not supported. 16* To prevent the application from being inadvertently terminated while running in the background, define **StyledString** as a member variable. 17 18## StyledString 19 20### constructor 21 22constructor(value: string | ImageAttachment | CustomSpan , styles?: Array\<StyleOptions>) 23 24A constructor used to create a styled string. 25 26**Atomic service API**: This API can be used in atomic services since API version 12. 27 28**System capability**: SystemCapability.ArkUI.ArkUI.Full 29 30**Parameters** 31 32| Name| Type| Mandatory| Description| 33| -------- | -------- | -------- | -------- | 34| value | string \| [ImageAttachment](#imageattachment) \| [CustomSpan](#customspan) | Yes| Text of the styled string.<br>**NOTE**<br>If this parameter is of the ImageAttachment or CustomSpan type, the **styles** parameter does not take effect. | 35| styles | Array<[StyleOptions](#styleoptions)> | No| Initialization options of the styled string.<br>**NOTE**<br>If **start** is set to an invalid value, it uses the default value **0**.<br>If the value of **start** is valid but that of **length** is invalid, the difference between the length of the styled string and the value of **start** is used as the value of **length**.<br>If **StyledStringKey** does not match **StyledStringValue**, it does not take effect.<br>The **styledKey** parameter has no default value.| 36 37### Properties 38 39**Atomic service API**: This API can be used in atomic services since API version 12. 40 41**System capability**: SystemCapability.ArkUI.ArkUI.Full 42 43| Name | Type | Read Only | Optional | Description | 44| ------ | ------ | ------ | ------ | -------------- | 45| length | number | Yes | No | Length of the styled string.<br>**NOTE**<br>If the styled string contains an image or a custom span, its length is 1.| 46 47### getString 48 49getString(): string 50 51Obtains the text of this styled string. 52 53**Atomic service API**: This API can be used in atomic services since API version 12. 54 55**System capability**: SystemCapability.ArkUI.ArkUI.Full 56 57**Return value** 58 59| Type |Description | 60| ------- | --------------------------------- | 61| string | Text of the styled string.<br>**NOTE**<br>If the styled string contains an image, the image is represented by a space in the return value.| 62 63### equals 64 65equals(other: StyledString): boolean 66 67Checks whether this styled string the same as another styled string. 68 69**Atomic service API**: This API can be used in atomic services since API version 12. 70 71**System capability**: SystemCapability.ArkUI.ArkUI.Full 72 73**Parameters** 74 75| Name | Type | Mandatory| Description | 76| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 77| other | [StyledString](#styledstring) | Yes | **StyledString** object to compare.| 78 79**Return value** 80 81| Type | Description | 82| ------- | --------------------------------- | 83| boolean | Whether two styled strings are equal.<br>**NOTE**<br>The two styled strings are the same if they have the same text and style.<br>**GestureStyle** in styled strings is not compared. This means that, if two styled strings are the same except for the event configured, they are the same.<br>In comparing **CustomSpan** objects, addresses are compared. The objects that have the same address are the same.| 84 85### subStyledString 86 87subStyledString(start: number , length?: number): StyledString 88 89Obtains a substring of this styled string. 90 91**Atomic service API**: This API can be used in atomic services since API version 12. 92 93**System capability**: SystemCapability.ArkUI.ArkUI.Full 94 95**Parameters** 96 97| Name | Type | Mandatory| Description | 98| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 99| start | number | Yes | Subscript that corresponds to the start position of the styled substring.| 100| length | number | No | Length of the styled substring.| 101 102**Return value** 103 104| Type | Description | 105| ------- | --------------------------------- | 106| [StyledString](#styledstring) | Styled substring.<br>**NOTE**<br>If the value of **start** is valid, the difference between the length of the styled string and the value of **start** is used as the default value of **length**.<br>If the values of **start** and **length** are out of the acceptable range or if any mandatory parameter is passed as **undefined**, an exception is thrown.| 107 108**Error codes** 109 110For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 111 112| ID| Error Message| 113| ------- | -------- | 114| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 115 116### getStyles 117 118getStyles(start: number , length: number , styledKey?: StyledStringKey): Array\<SpanStyle> 119 120Obtains the styles in the specified range of a styled string. 121 122**Atomic service API**: This API can be used in atomic services since API version 12. 123 124**System capability**: SystemCapability.ArkUI.ArkUI.Full 125 126**Parameters** 127 128| Name | Type | Mandatory| Description | 129| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 130| start | number | Yes | Subscript that corresponds to the target range in the styled string.| 131| length | number | Yes | Length of the target range in the styled string.| 132| styledKey | [StyledStringKey](#styledstringkey) | No | Style key of the styled string.| 133 134**Return value** 135 136| Type | Description | 137| ------- | --------------------------------- | 138| Array<[SpanStyle](#spanstyle)> | Array of styles.<br>**NOTE**<br>If no style is set for the specified range in the styled string, an empty array is returned.<br>If the values of **start** and **length** are out of the acceptable range or if any mandatory parameter is passed as **undefined**, an exception is thrown.<br>If **styledKey** is set to an invalid value or **undefined**, an exception is thrown.<br>If **styledKey** is a **CustomSpan** object, the style returned is the one passed to create the object. That is, modifying the style object also affects the actual display effect.| 139 140**Error codes** 141 142For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 143 144| ID| Error Message| 145| ------- | -------- | 146| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 147 148### fromHtml 149 150static fromHtml(html: string): Promise\<StyledString> 151 152Converts an HTML-formatted string into a styled string. Currently, the conversion supports the following HTML tags: **\<p>**, **\<span>**, **\<img>**. Only the styles defined by the **style** attributes of these tags can be converted into corresponding styles in styled strings. 153 154**Atomic service API**: This API can be used in atomic services since API version 12. 155 156**System capability**: SystemCapability.ArkUI.ArkUI.Full 157 158**Parameters** 159 160| Name | Type | Mandatory| Description | 161| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 162| html | string | Yes | HTML-formatted string.| 163 164**Return value** 165 166| Type | Description | 167| ------- | --------------------------------- | 168| [StyledString](#styledstring) | Styled string.| 169 170**Error codes** 171 172For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 173 174| ID| Error Message| 175| ------- | -------- | 176| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 177 178### toHtml<sup>14+</sup> 179 180static toHtml(styledString: StyledString): string 181 182Converts a styled string into an HTML-formatted string. The supported styled string keys for conversion, as detailed in [StyledStringKey](#styledstringkey), include: **StyledStringKey.FONT**, **StyledStringKey.DECORATION**, **StyledStringKey.LETTER_SPACING**, **StyledStringKey.TEXT_SHADOW**, **StyledStringKey.LINE_HEIGHT**, and **StyledStringKey.IMAGE**. 183 184**Atomic service API**: This API can be used in atomic services since API version 14. 185 186**System capability**: SystemCapability.ArkUI.ArkUI.Full 187 188**Parameters** 189 190| Name | Type | Mandatory| Description | 191| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 192| styledString | StyledString | Yes | Styled string.| 193 194**Return value** 195 196| Type | Description | 197| ------- | --------------------------------- | 198| string | HTML string.| 199 200**Error codes** 201 202For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 203 204| ID| Error Message| 205| ------- | -------- | 206| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 207 208## MutableStyledString 209 210Inherits from the [StyledString](#styledstring) class. 211 212> **An exception is thrown in the following cases:** 213> 214> The values of **start** and **length** are out of the acceptable range or if any mandatory parameter is passed as **undefined**. 215> 216> **styledKey** or **styledValue** is set to an invalid value or they do not match. 217> 218 219### replaceString 220 221replaceString(start: number , length: number , other: string): void 222 223Replaces the string in the specified range of this styled string. 224 225**Atomic service API**: This API can be used in atomic services since API version 12. 226 227**System capability**: SystemCapability.ArkUI.ArkUI.Full 228 229**Parameters** 230 231| Name | Type | Mandatory| Description | 232| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 233| start | number | Yes | Subscript of the target range.| 234| length | number | Yes | Length of the target range.| 235| other | string | Yes | String to replace the content in the target range.<br>**NOTE**<br>The string specified here uses the style of the character at the **start** position.| 236 237**Error codes** 238 239For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 240 241| ID| Error Message| 242| ------- | -------- | 243| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 244 245### insertString 246 247insertString(start: number , other: string): void 248 249Inserts a string. 250 251**Atomic service API**: This API can be used in atomic services since API version 12. 252 253**System capability**: SystemCapability.ArkUI.ArkUI.Full 254 255**Parameters** 256 257| Name | Type | Mandatory| Description | 258| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 259| start | number | Yes | Subscript of the position where the string will be inserted.| 260| other | string | Yes | String to insert.<br>**NOTE**<br>The string specified here uses the style of the character at the **start** - 1 position or, if that character does not have style set, the style of the character at the **start** position.| 261 262**Error codes** 263 264For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 265 266| ID| Error Message| 267| ------- | -------- | 268| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 269 270### removeString 271 272removeString(start: number , length: number): void 273 274Removes the string in the specified range of this styled string. 275 276This API equally works when the styled string contains an image. 277 278**Atomic service API**: This API can be used in atomic services since API version 12. 279 280**System capability**: SystemCapability.ArkUI.ArkUI.Full 281 282**Parameters** 283 284| Name | Type | Mandatory| Description | 285| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 286| start | number | Yes | Subscript of the target range.| 287| length | number | Yes | Length of the target range.| 288 289**Error codes** 290 291For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 292 293| ID| Error Message| 294| ------- | -------- | 295| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 296 297### replaceStyle 298 299replaceStyle(spanStyle: SpanStyle): void 300 301Replaces the style in the specified range of this styled string. 302 303**Atomic service API**: This API can be used in atomic services since API version 12. 304 305**System capability**: SystemCapability.ArkUI.ArkUI.Full 306 307**Parameters** 308 309| Name | Type | Mandatory| Description | 310| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 311| spanStyle | [SpanStyle](#spanstyle) | Yes | Style object.<br>**NOTE**<br>By default, the original style is removed and replaced with the new style.<br>If **styledKey** of **SpanStyle** is **IMAGE** or **CUSTOM_SPAN**, this API takes effect only when an image or custom span with the length of 1 is at the **start** position.| 312 313**Error codes** 314 315For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 316 317| ID| Error Message| 318| ------- | -------- | 319| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 320 321### setStyle 322 323setStyle(spanStyle: SpanStyle): void 324 325Sets a new style for the specified range of this styled string. 326 327**Atomic service API**: This API can be used in atomic services since API version 12. 328 329**System capability**: SystemCapability.ArkUI.ArkUI.Full 330 331**Parameters** 332 333| Name | Type | Mandatory| Description | 334| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 335| spanStyle | [SpanStyle](#spanstyle) | Yes | Style object.<br>**NOTE**<br>By default, the new style is applied without removing the original style. If the style already exists, it is updated.<br>If **styledKey** of **SpanStyle** is **IMAGE** or **CUSTOM_SPAN**, this API takes effect only when an image or custom span with the length of 1 is at the **start** position.| 336 337**Error codes** 338 339For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 340 341| ID| Error Message| 342| ------- | -------- | 343| 401 |The parameter check failed. | 344 345### removeStyle 346 347removeStyle(start: number , length: number , styledKey: StyledStringKey): void 348 349Removes the style for the specified range of this styled string. 350 351After a style is removed, the value set for the corresponding style attribute in the [Text](./ts-basic-components-text.md) component is used. If the value is not set, the default value is used. 352 353This API equally works when the styled string contains an image. 354 355**Atomic service API**: This API can be used in atomic services since API version 12. 356 357**System capability**: SystemCapability.ArkUI.ArkUI.Full 358 359**Parameters** 360 361| Name | Type | Mandatory| Description | 362| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 363| start | number | Yes | Subscript that corresponds to the start position of the target range.| 364| length | number | Yes | Length of the target range.| 365| styledKey | [StyledStringKey](#styledstringkey) | Yes | Styled key.| 366 367**Error codes** 368 369For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 370 371| ID| Error Message| 372| ------- | -------- | 373| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 374 375### removeStyles 376 377removeStyles(start: number , length: number): void 378 379Removes all styles for the specified range of this styled string. 380 381After a style is removed, the value set for the corresponding style attribute in the [Text](./ts-basic-components-text.md) component is used. If the value is not set, the default value is used. 382 383This API equally works when the styled string contains an image. 384 385**Atomic service API**: This API can be used in atomic services since API version 12. 386 387**System capability**: SystemCapability.ArkUI.ArkUI.Full 388 389**Parameters** 390 391| Name | Type | Mandatory| Description | 392| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 393| start | number | Yes | Subscript that corresponds to the start position of the target range.| 394| length | number | Yes | Length of the target range.| 395 396**Error codes** 397 398For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 399 400| ID| Error Message| 401| ------- | -------- | 402| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 403 404### clearStyles 405 406clearStyles(): void 407 408Removes all styles of this styled string. 409 410After a style is removed, the value set for the corresponding style attribute in the [Text](./ts-basic-components-text.md) component is used. If the value is not set, the default value is used. 411 412**Atomic service API**: This API can be used in atomic services since API version 12. 413 414**System capability**: SystemCapability.ArkUI.ArkUI.Full 415 416### replaceStyledString 417 418replaceStyledString(start: number , length: number , other: StyledString): void 419 420Replaces the styled string in the specified range. 421 422**Atomic service API**: This API can be used in atomic services since API version 12. 423 424**System capability**: SystemCapability.ArkUI.ArkUI.Full 425 426**Parameters** 427 428| Name | Type | Mandatory| Description | 429| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 430| start | number | Yes | Subscript that corresponds to the start position of the target range.| 431| length | number | Yes | Length of the target range.| 432| other | [StyledString](#styledstring) | Yes | New styled string.| 433 434**Error codes** 435 436For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 437 438| ID| Error Message| 439| ------- | -------- | 440| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 441 442### insertStyledString 443 444insertStyledString(start: number , other: StyledString): void 445 446Inserts a new styled string at the specified position. 447 448**Atomic service API**: This API can be used in atomic services since API version 12. 449 450**System capability**: SystemCapability.ArkUI.ArkUI.Full 451 452**Parameters** 453 454| Name | Type | Mandatory| Description | 455| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 456| start | number | Yes | Subscript of the position to insert the styled string.| 457| other | [StyledString](#styledstring) | Yes | New styled string.| 458 459**Error codes** 460 461For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 462 463| ID| Error Message| 464| ------- | -------- | 465| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 466 467### appendStyledString 468 469appendStyledString(other: StyledString): void 470 471Appends a styled string. 472 473**Atomic service API**: This API can be used in atomic services since API version 12. 474 475**System capability**: SystemCapability.ArkUI.ArkUI.Full 476 477**Parameters** 478 479| Name | Type | Mandatory| Description | 480| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 481| other | [StyledString](#styledstring) | Yes | New styled string.| 482 483 484## StyledStringValue 485 486type StyledStringValue = TextStyle | DecorationStyle | BaselineOffsetStyle | LetterSpacingStyle | 487TextShadowStyle | GestureStyle | ImageAttachment | ParagraphStyle | LineHeightStyle | UrlStyle | CustomSpan | UserDataSpan | BackgroundColorStyle 488 489Defines the style for a styled string. 490 491**Atomic service API**: This API can be used in atomic services since API version 12. 492 493**System capability**: SystemCapability.ArkUI.ArkUI.Full 494 495| Type | Description | 496| ------ | ---------- | 497| [TextStyle](#textstyle) | Text style.| 498| [DecorationStyle](#decorationstyle) | Text decorative line style.| 499| [BaselineOffsetStyle](#baselineoffsetstyle) | Text baseline offset style.| 500| [LetterSpacingStyle](#letterspacingstyle) | Text letter spacing style.| 501| [LineHeightStyle](#lineheightstyle) | Text line height style.| 502| [TextShadowStyle](#textshadowstyle) | Text shadow style.| 503| [GestureStyle](#gesturestyle) | Gesture style.| 504| [ParagraphStyle](#paragraphstyle) | Text paragraph style.| 505| [ImageAttachment](#imageattachment) | Image style.| 506| [CustomSpan](#customspan) | Custom span style.| 507| [UserDataSpan](#userdataspan) | User data span style.| 508 509## StyleOptions 510 511**Atomic service API**: This API can be used in atomic services since API version 12. 512 513**System capability**: SystemCapability.ArkUI.ArkUI.Full 514 515| Name | Type | Mandatory| Description | 516| ------- | --------------------------------- | ---- | --------------------------------- | 517| start | number | No | Start position of the styled string style.<br>If the value is less than 0 or exceeds the string length, it is treated as **0**.| 518| length | number | No | Length of the styled string style.<br>f the value is less than 0 or exceeds the difference between the string length and the value of **start**, it is treated as the difference between the string length and the value of **start**.| 519| styledKey | [StyledStringKey](#styledstringkey) | Yes | Style key.| 520| styledValue | [StyledStringValue](#styledstringvalue) | Yes | Style object.| 521 522## SpanStyle 523 524**Atomic service API**: This API can be used in atomic services since API version 12. 525 526**System capability**: SystemCapability.ArkUI.ArkUI.Full 527 528| Name | Type | Mandatory| Description | 529| ------- | --------------------------------- | ---- | --------------------------------- | 530| start | number | Yes | Start position of the styled string style.| 531| length | number | Yes | Length of the styled string style.| 532| styledKey | [StyledStringKey](#styledstringkey) | Yes | Style key.| 533| styledValue | [StyledStringValue](#styledstringvalue) | Yes | Style object.| 534 535## TextStyle 536 537Describes the text font style. 538 539**System capability**: SystemCapability.ArkUI.ArkUI.Full 540 541### Properties 542 543**Atomic service API**: This API can be used in atomic services since API version 12. 544 545**System capability**: SystemCapability.ArkUI.ArkUI.Full 546 547| Name | Type | Read Only | Optional | Description | 548| ------------ |---------------------| ---- | ---- | ------ | 549| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Yes | Yes | Font color of the styled string.| 550| fontFamily | string | Yes | Yes | Font family of the styled string.| 551| fontSize | number | Yes | Yes | Font size of the styled string.<br>Unit: fp| 552| fontWeight | number | Yes | Yes | Font weight of the styled string.| 553| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Yes | Yes | Font style of the styled string.| 554 555### constructor 556 557constructor(value?: TextStyleInterface) 558 559A constructor used to create a text style. 560 561**Atomic service API**: This API can be used in atomic services since API version 12. 562 563**System capability**: SystemCapability.ArkUI.ArkUI.Full 564 565**Parameters** 566 567| Name | Type | Mandatory| Description | 568| ------- | --------------------------------- | ---- | --------------------------------- | 569| value | [TextStyleInterface](#textstyleinterface) | No | Font style options.| 570 571## TextStyleInterface 572 573**Atomic service API**: This API can be used in atomic services since API version 12. 574 575**System capability**: SystemCapability.ArkUI.ArkUI.Full 576 577| Name | Type | Mandatory| Description | 578| ------- | --------------------------------- | ---- | --------------------------------- | 579| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color.| 580| fontFamily | [ResourceStr](ts-types.md#resourcestr) | No | Font family.| 581| fontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Font size. If **unit** of **LengthMetrics** is percent, the setting does not take effect, and 16 fp is used.<br>Unit: fp| 582| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | No | Font weight.<br>For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a heavier font weight. The default value is **400**. For the string type, only strings that represent a number, for example, **400**, and the following enumerated values of **FontWeight** are supported: **bold**, **bolder**, **lighter**, **regular**, and **medium**.| 583| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style.| 584 585## GestureStyle 586 587Describes the event gesture style. 588 589**System capability**: SystemCapability.ArkUI.ArkUI.Full 590 591### constructor 592 593constructor(value?: GestureStyleInterface) 594 595A constructor used to create a gesture style. 596 597**Atomic service API**: This API can be used in atomic services since API version 12. 598 599**System capability**: SystemCapability.ArkUI.ArkUI.Full 600 601**Parameters** 602 603| Name | Type | Mandatory| Description | 604| ------- | --------------------------------- | ---- | --------------------------------- | 605| value | [GestureStyleInterface](#gesturestyleinterface) | No | Event options.| 606 607## GestureStyleInterface 608 609**Atomic service API**: This API can be used in atomic services since API version 12. 610 611**System capability**: SystemCapability.ArkUI.ArkUI.Full 612 613| Name | Type | Mandatory| Description | 614| ------- | --------------------------------- | ---- | --------------------------------- | 615| onClick | Callback\<[ClickEvent](ts-universal-events-click.md#clickevent)> | No | Callback for click events.| 616| onLongPress | Callback\<[GestureEvent](./ts-gesture-settings.md#gestureevent)> | No | Callback for long press events.| 617 618## DecorationStyle 619 620Describes the text decorative line style. 621 622**System capability**: SystemCapability.ArkUI.ArkUI.Full 623 624### Properties 625 626**Atomic service API**: This API can be used in atomic services since API version 12. 627 628**System capability**: SystemCapability.ArkUI.ArkUI.Full 629 630| Name | Type | Read Only |Optional | Description | 631| ------------ |---------------------| ---- | ---- | ------ | 632| type | [TextDecorationType](ts-appendix-enums.md#textdecorationtype) | Yes | No | Type of the text decorative line.| 633| color | [ResourceColor](ts-types.md#resourcecolor) | Yes | Yes | Color of the text decorative line.| 634| style | [TextDecorationStyle](ts-appendix-enums.md#textdecorationstyle12) | Yes |Yes | Style of the text decorative line.| 635 636### constructor 637 638constructor(value: DecorationStyleInterface) 639 640A constructor used to create a text decorative line style. 641 642**Atomic service API**: This API can be used in atomic services since API version 12. 643 644**System capability**: SystemCapability.ArkUI.ArkUI.Full 645 646**Parameters** 647 648| Name | Type | Mandatory| Description | 649| ------- | --------------------------------- | ---- | --------------------------------- | 650| value | [DecorationStyleInterface](#decorationstyleinterface) | Yes | Text decorative line options.<br>Default value:<br>{<br> type: TextDecorationType.None,<br> color: Color.Black,<br> style: TextDecorationStyle.SOLID <br>} | 651 652## DecorationStyleInterface 653 654**Atomic service API**: This API can be used in atomic services since API version 12. 655 656**System capability**: SystemCapability.ArkUI.ArkUI.Full 657 658| Name | Type | Mandatory| Description | 659| ------- | --------------------------------- | ---- | --------------------------------- | 660| type | [TextDecorationType](ts-appendix-enums.md#textdecorationtype) | Yes | Type of the text decorative line.| 661| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the text decorative line.| 662| style | [TextDecorationStyle](ts-appendix-enums.md#textdecorationstyle12) | No | Style of the text decorative line.| 663 664## BaselineOffsetStyle 665 666Describes the text baseline offset style. 667 668**System capability**: SystemCapability.ArkUI.ArkUI.Full 669 670### Properties 671 672**Atomic service API**: This API can be used in atomic services since API version 12. 673 674**System capability**: SystemCapability.ArkUI.ArkUI.Full 675 676| Name | Type | Read Only | Optional | Description | 677| ------------ |---------------------| ---- | ---- | ------ | 678| baselineOffset | number | Yes | No| Text baseline offset.<br>Unit: vp| 679 680### constructor 681 682constructor(value: LengthMetrics) 683 684A constructor used to create a text baseline offset style. 685 686**Atomic service API**: This API can be used in atomic services since API version 12. 687 688**System capability**: SystemCapability.ArkUI.ArkUI.Full 689 690**Parameters** 691 692| Name | Type | Mandatory| Description | 693| ------- | --------------------------------- | ---- | --------------------------------- | 694| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Text baseline offset options. This API does not work if **unit** of **LengthMetrics** is percent.| 695 696## LetterSpacingStyle 697 698Describes the letter spacing style. 699 700**System capability**: SystemCapability.ArkUI.ArkUI.Full 701 702### Properties 703 704**Atomic service API**: This API can be used in atomic services since API version 12. 705 706**System capability**: SystemCapability.ArkUI.ArkUI.Full 707 708| Name | Type | Read Only | Optional | Description | 709| ------------ |---------------------| ---- | ---- | ------ | 710| letterSpacing | number | Yes | No | Letter spacing.<br>Unit: vp| 711 712### constructor 713 714constructor(value: LengthMetrics) 715 716A constructor used to create a text letter spacing style. 717 718**Atomic service API**: This API can be used in atomic services since API version 12. 719 720**System capability**: SystemCapability.ArkUI.ArkUI.Full 721 722**Parameters** 723 724| Name | Type | Mandatory| Description | 725| ------- | --------------------------------- | ---- | --------------------------------- | 726| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Letter spacing options. This API does not work if **unit** of **LengthMetrics** is percent.| 727 728## LineHeightStyle 729 730Describes the text line height style. 731 732**System capability**: SystemCapability.ArkUI.ArkUI.Full 733 734### Properties 735 736**Atomic service API**: This API can be used in atomic services since API version 12. 737 738**System capability**: SystemCapability.ArkUI.ArkUI.Full 739 740| Name | Type | Read Only | Optional | Description | 741| ------------ |---------------------| ---- | ---- | ------ | 742| lineHeight | number | Yes | No | Text line height of the styled string.<br>Unit: vp| 743 744### constructor 745 746constructor(lineHeight: LengthMetrics) 747 748A constructor used to create a text line height style. 749 750**Atomic service API**: This API can be used in atomic services since API version 12. 751 752**System capability**: SystemCapability.ArkUI.ArkUI.Full 753 754**Parameters** 755 756| Name | Type | Mandatory| Description | 757| ------- | --------------------------------- | ---- | --------------------------------- | 758| lineHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Text line height options. If **value** of **LengthMetrics** is less than or equal to 0, the text line height is unlimited and automatically adapts to the font size.| 759 760## TextShadowStyle 761 762Describes the text shadow style. 763 764**System capability**: SystemCapability.ArkUI.ArkUI.Full 765 766### Properties 767 768**Atomic service API**: This API can be used in atomic services since API version 12. 769 770**System capability**: SystemCapability.ArkUI.ArkUI.Full 771 772| Name | Type | Read Only | Optional | Description | 773| ------------ |---------------------| ---- | ---- | ------ | 774| textShadow | Array\<[ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions)> | Yes | No | Text shadow of the styled string.| 775 776### constructor 777 778constructor(value: ShadowOptions | Array\<ShadowOptions>) 779 780A constructor used to create a text shadow style. 781 782**Atomic service API**: This API can be used in atomic services since API version 12. 783 784**System capability**: SystemCapability.ArkUI.ArkUI.Full 785 786**Parameters** 787 788| Name | Type | Mandatory| Description | 789| ------- | --------------------------------- | ---- | --------------------------------- | 790| value | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| Array\<[ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions)> | Yes | Text shadow options.| 791 792## ImageAttachment 793 794Describes the image attachment. 795 796**System capability**: SystemCapability.ArkUI.ArkUI.Full 797 798### Properties 799 800**System capability**: SystemCapability.ArkUI.ArkUI.Full 801 802| Name | Type | Read Only | Optional | Description | 803| ------------ |---------------------| ---- | ---- | ------ | 804| value | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | No | Image data source of the styled string. **Atomic service API**: This API can be used in atomic services since API version 12.| 805| size | [SizeOptions](ts-types.md#sizeoptions) | Yes | Yes | Image size of the styled string. **Atomic service API**: This API can be used in atomic services since API version 12.| 806| verticalAlign | [ImageSpanAlignment](ts-appendix-enums.md#imagespanalignment10) | Yes | Yes | Image alignment mode of the styled string. **Atomic service API**: This API can be used in atomic services since API version 12.| 807| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Yes | Yes | Image scale type of the styled string. **Atomic service API**: This API can be used in atomic services since API version 12.| 808| layoutStyle | [ImageAttachmentLayoutStyle](#imageattachmentlayoutstyle) | Yes | Yes | Image layout of the styled string. **Atomic service API**: This API can be used in atomic services since API version 12.| 809| colorFilter<sup>15+</sup> | [ColorFilterType](#colorfiltertype15) | Yes | Yes | Image color filter of the styled string. **Atomic service API**: This API can be used in atomic services since API version 15.| 810 811### constructor 812 813constructor(value: ImageAttachmentInterface) 814 815A constructor used to create an image object. 816 817**Atomic service API**: This API can be used in atomic services since API version 12. 818 819**System capability**: SystemCapability.ArkUI.ArkUI.Full 820 821**Parameters** 822 823| Name | Type | Mandatory| Description | 824| ------- | --------------------------------- | ---- | --------------------------------- | 825| value | [ImageAttachmentInterface](#imageattachmentinterface) | Yes | Image attachment options.| 826 827### constructor<sup>15+</sup> 828 829constructor(attachment: Optional\<AttachmentType\>) 830 831A constructor used to create an image object. Compared to the constructor with a **value** type parameter, this constructor with an **attachment** type parameter supports images of **undefined** and [ResourceStr](ts-types.md#resourcestr) types. 832 833**Atomic service API**: This API can be used in atomic services since API version 15. 834 835**System capability**: SystemCapability.ArkUI.ArkUI.Full 836 837**Parameters** 838 839| Name | Type | Mandatory| Description | 840| ------- | --------------------------------- | ---- | --------------------------------- | 841| attachment | Optional<[AttachmentType](#attachmenttype15)> | Yes | Image attachment, which can be of type PixelMap or [ResourceStr](ts-types.md#resourcestr).| 842 843## AttachmentType<sup>15+</sup> 844 845type AttachmentType = ImageAttachmentInterface | ResourceImageAttachmentOptions 846 847Defines the image attachment type, which is used to set images of PixelMap or [ResourceStr](ts-types.md#resourcestr) type for styled strings. 848 849**Atomic service API**: This API can be used in atomic services since API version 15. 850 851**System capability**: SystemCapability.ArkUI.ArkUI.Full 852 853| Type | Description | 854| ------ | ---------- | 855| [ImageAttachmentInterface](#imageattachmentinterface) | Settings for images of the PixelMap type.| 856| [ResourceImageAttachmentOptions](#resourceimageattachmentoptions15) | Settings for images of the ResourceStr type.| 857 858## ColorFilterType<sup>15+</sup> 859 860type ColorFilterType = ColorFilter | DrawingColorFilter 861 862Defines the type for image color filter settings. 863 864**Atomic service API**: This API can be used in atomic services since API version 15. 865 866**System capability**: SystemCapability.ArkUI.ArkUI.Full 867 868| Type | Description | 869| ------ | ---------- | 870| [ColorFilter](ts-types.md#colorfilter9) | Color filter settings of the ColorFilter type.| 871| [DrawingColorFilter](../../apis-arkgraphics2d/js-apis-graphics-drawing.md#colorfilter) | Color filter settings of the DrawingColorFilter type.| 872 873## ImageAttachmentInterface 874 875**System capability**: SystemCapability.ArkUI.ArkUI.Full 876 877| Name | Type | Mandatory| Description | 878| ------- | --------------------------------- | ---- | --------------------------------- | 879| value | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | Image data source. **Atomic service API**: This API can be used in atomic services since API version 12.| 880| size | [SizeOptions](ts-types.md#sizeoptions) | No | Image size. **Atomic service API**: This API can be used in atomic services since API version 12.<br>The default value of **size** depends on the value of **objectFit**. For example, if the value of **objectFit** is **Cover**, the image height is the component height minus the top and bottom paddings, and the image width is the component width minus the left and right paddings.| 881| verticalAlign | [ImageSpanAlignment](ts-appendix-enums.md#imagespanalignment10) | No | Alignment mode of the image with the text. **Atomic service API**: This API can be used in atomic services since API version 12.<br>Default value: **ImageSpanAlignment.BOTTOM**| 882| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | No | Image scale type. **Atomic service API**: This API can be used in atomic services since API version 12.<br>Default value: **ImageFit.Cover**| 883| layoutStyle | [ImageAttachmentLayoutStyle](#imageattachmentlayoutstyle) | No | Image layout. **Atomic service API**: This API can be used in atomic services since API version 12.| 884| colorFilter<sup>15+</sup> | [ColorFilterType](#colorfiltertype15) | No | Image color filter of the styled string. **Atomic service API**: This API can be used in atomic services since API version 15.| 885 886## ImageAttachmentLayoutStyle 887 888**Atomic service API**: This API can be used in atomic services since API version 12. 889 890**System capability**: SystemCapability.ArkUI.ArkUI.Full 891 892| Name | Type | Mandatory| Description | 893| ------- | --------------------------------- | ---- | --------------------------------- | 894| margin | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [Margin](ts-types.md#margin) | No | Image margin.<br>Default value: **0**.<br>Unit: vp| 895| padding | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [Padding](ts-types.md#padding) | No | Image padding.<br>Default value: **0**.<br>Unit: vp| 896| borderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [BorderRadiuses](ts-types.md#borderradiuses9) | No | Radius of the image border corners.<br>Default value: **0**.<br>Unit: vp| 897 898## ResourceImageAttachmentOptions<sup>15+</sup> 899 900Defines the settings for images of the ResourceStr type. 901 902**Atomic service API**: This API can be used in atomic services since API version 15. 903 904**System capability**: SystemCapability.ArkUI.ArkUI.Full 905 906| Name | Type | Mandatory| Description | 907| ------- | --------------------------------- | ---- | --------------------------------- | 908| resourceValue | Optional<[ResourceStr](ts-types.md#resourcestr)> | Yes | Image data source.| 909| size | [SizeOptions](ts-types.md#sizeoptions) | No | Image size.| 910| verticalAlign | [ImageSpanAlignment](ts-appendix-enums.md#imagespanalignment10) | No | Alignment mode of the image with the text.<br>Default value: **ImageSpanAlignment.BOTTOM**| 911| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | No | Image scale type.<br>Default value: **ImageFit.Cover**| 912| layoutStyle | [ImageAttachmentLayoutStyle](#imageattachmentlayoutstyle) | No | Image layout.| 913| colorFilter | [ColorFilterType](#colorfiltertype15) | No | Image color filter of the styled string.| 914| syncLoad | boolean | No | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder image is not displayed.<br>Default value: **false**| 915 916## CustomSpan 917 918Describes the custom span. Only the base class is provided. You need to define the specific implementation. 919 920The drag preview of a custom span is blank. 921 922**System capability**: SystemCapability.ArkUI.ArkUI.Full 923 924### onMeasure 925 926abstract onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics 927 928Called to obtain the size of a custom span. 929 930**Atomic service API**: This API can be used in atomic services since API version 12. 931 932**System capability**: SystemCapability.ArkUI.ArkUI.Full 933 934**Parameters** 935 936| Name | Type | Mandatory| Description | 937| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 938| measureInfo | [CustomSpanMeasureInfo](#customspanmeasureinfo) | Yes | Font size of the text.| 939 940**Return value** 941 942| Type | Description | 943| ------- | --------------------------------- | 944| [CustomSpanMetrics](#customspanmetrics) | Size of the custom span.<br>**NOTE**<br>The final height of the custom span is subject to the line height of the **Text** component. If no value is specified for **height**, the custom span takes the **fontSize** value of the **Text** component as its height. If the value specified is greater than the height of other child components on the same line, the custom span takes the line height of the **Text** component as its height.| 945 946### onDraw 947 948abstract onDraw(context: DrawContext, drawInfo: CustomSpanDrawInfo): void 949 950Called to draw a custom span. 951 952**Atomic service API**: This API can be used in atomic services since API version 12. 953 954**System capability**: SystemCapability.ArkUI.ArkUI.Full 955 956**Parameters** 957 958| Name | Type | Mandatory| Description | 959| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 960| context | [DrawContext](../js-apis-arkui-graphics.md#drawcontext) | Yes | Drawing context.<br>**NOTE**<br>The **canvas** method of **DrawContext** obtains the canvas of the **Text** component. As such, the custom span does not extend beyond the area of the **Text** component.| 961| drawInfo | [CustomSpanDrawInfo](#customspandrawinfo) | Yes | Drawing information of the custom span.| 962 963### invalidate<sup>13+<sup> 964 965invalidate(): void 966 967Manually triggers a refresh of the **Text** component that uses this **CustomSpan**. 968 969**Atomic service API**: This API can be used in atomic services since API version 13. 970 971**System capability**: SystemCapability.ArkUI.ArkUI.Full 972 973## CustomSpanMeasureInfo 974 975**Atomic service API**: This API can be used in atomic services since API version 12. 976 977**System capability**: SystemCapability.ArkUI.ArkUI.Full 978 979| Name | Type | Mandatory| Description | 980| ------- | --------------------------------- | ---- | --------------------------------- | 981| fontSize | number | Yes | Text font size.<br>Unit: fp| 982 983## CustomSpanMetrics 984 985**Atomic service API**: This API can be used in atomic services since API version 12. 986 987**System capability**: SystemCapability.ArkUI.ArkUI.Full 988 989| Name | Type | Mandatory| Description | 990| ------- | --------------------------------- | ---- | --------------------------------- | 991| width | number | Yes | Width of the custom span.<br>Unit: vp| 992| height | number | No | Height of the custom span.<br>Unit: vp| 993 994## CustomSpanDrawInfo 995 996**Atomic service API**: This API can be used in atomic services since API version 12. 997 998**System capability**: SystemCapability.ArkUI.ArkUI.Full 999 1000| Name | Type | Mandatory| Description | 1001| ------- | --------------------------------- | ---- | --------------------------------- | 1002| x | number | Yes | Offset of the custom span relative to the mounted component.<br>Unit: px| 1003| lineTop | number | Yes | Top margin of the custom span relative to the **Text** component.<br>Unit: px| 1004| lineBottom | number | Yes | Bottom margin of the custom span relative to the **Text** component.<br>Unit: px| 1005| baseline | number | Yes | Baseline offset of the line where the custom span is located.<br>Unit: px| 1006 1007## ParagraphStyle 1008 1009Describes the text paragraph style. 1010 1011Except the first paragraph, all paragraphs are formed using the character escape '\n'. 1012 1013The style of a paragraph is the one (if any) set for the first element or the paragraph style of the bound component. 1014 1015**System capability**: SystemCapability.ArkUI.ArkUI.Full 1016 1017### Properties 1018 1019**Atomic service API**: This API can be used in atomic services since API version 12. 1020 1021**System capability**: SystemCapability.ArkUI.ArkUI.Full 1022 1023| Name | Type | Read Only | Optional | Description | 1024| ------------ |---------------------| ---- | ---- | ------ | 1025| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Yes | Yes | Horizontal alignment of the text paragraph.| 1026| textIndent | number | Yes | Yes | First line indent of the text paragraph.| 1027| maxLines | number | Yes | Yes | Maximum number of lines in the text paragraph.| 1028| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | Yes | Yes | Display mode when the text is too long in the text paragraph.| 1029| wordBreak | [WordBreak](ts-appendix-enums.md#wordbreak11) | Yes | Yes | Word break rule of the text paragraph.| 1030| leadingMargin | number \| [LeadingMarginPlaceholder](ts-basic-components-richeditor.md#leadingmarginplaceholder11) | Yes | Yes | Indent of the text paragraph.| 1031 1032> **NOTE** 1033> 1034> As the **maxLines** and **overflow** attributes of the styled string take effect only in the **Text** component, you are advised to set them in the component. 1035 1036### constructor 1037 1038constructor(value?: ParagraphStyleInterface) 1039 1040A constructor used to create a text paragraph style. 1041 1042**Atomic service API**: This API can be used in atomic services since API version 12. 1043 1044**System capability**: SystemCapability.ArkUI.ArkUI.Full 1045 1046**Parameters** 1047 1048| Name | Type | Mandatory| Description | 1049| ------- | --------------------------------- | ---- | --------------------------------- | 1050| value | [ParagraphStyleInterface](#paragraphstyleinterface) | No | Paragraph style options.| 1051 1052## ParagraphStyleInterface 1053 1054**Atomic service API**: This API can be used in atomic services since API version 12. 1055 1056**System capability**: SystemCapability.ArkUI.ArkUI.Full 1057 1058| Name | Type | Mandatory| Description | 1059| ------- | --------------------------------- | ---- | --------------------------------- | 1060| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | No | Horizontal alignment of the text paragraph.| 1061| textIndent | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | First line indent of the text paragraph.| 1062| maxLines | number | No | Maximum number of lines in the text paragraph.| 1063| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | No | Display mode when the text is too long in the text paragraph.<br>This parameter must be used with **maxLines** for the settings to take effect. **TextOverflow.MARQUEE** is not supported.| 1064| wordBreak | [WordBreak](ts-appendix-enums.md#wordbreak11) | No | Word break rule of the text paragraph.| 1065| leadingMargin | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [LeadingMarginPlaceholder](ts-basic-components-richeditor.md#leadingmarginplaceholder11) | No | Indent of the text paragraph.| 1066 1067## UserDataSpan 1068 1069Implements a **UserDataSpan** object for storing and obtaining user data. Only the base class is provided. You need to define the specific implementation. 1070 1071The extended user data does not affect the display effect. 1072 1073**Atomic service API**: This API can be used in atomic services since API version 12. 1074 1075**System capability**: SystemCapability.ArkUI.ArkUI.Full 1076 1077## StyledStringKey 1078 1079**System capability**: SystemCapability.ArkUI.ArkUI.Full 1080 1081| Name | Value| Description | 1082| ------ | --- | ----------------------------- | 1083| FONT | 0 | Font style key, applicable to [TextStyle](./ts-universal-styled-string.md#textstyle).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1084| DECORATION | 1 | Text decorative line style key, applicable to [DecorationStyle](./ts-universal-styled-string.md#decorationstyle).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1085| BASELINE_OFFSET | 2 | Text baseline offset style key, applicable to [BaselineOffsetStyle](./ts-universal-styled-string.md#baselineoffsetstyle).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1086| LETTER_SPACING | 3 | Text letter spacing style key, applicable to [LetterSpacingStyle](./ts-universal-styled-string.md#letterspacingstyle).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1087| TEXT_SHADOW | 4 | Text shadow style key, applicable to [TextShadowStyle](./ts-universal-styled-string.md#textshadowstyle).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1088| LINE_HEIGHT | 5 | Text line height style key, applicable to [LineHeightStyle](./ts-universal-styled-string.md#lineheightstyle).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1089| BACKGROUND_COLOR<sup>14+</sup> | 6 | Text background color style key, applicable to [BackgroundColorStyle](./ts-universal-styled-string.md#backgroundcolorstyle14).<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 1090| URL<sup>14+</sup> | 7 | Hyperlink style key, applicable to [UrlStyle](./ts-universal-styled-string.md#urlstyle14).<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 1091| GESTURE | 100 | Gesture key, applicable to [GestureStyle](./ts-universal-styled-string.md#gesturestyle).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1092| PARAGRAPH_STYLE | 200 | Paragraph style key, applicable to [ParagraphStyle](./ts-universal-styled-string.md#paragraphstyle).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1093| IMAGE | 300 | Image key, applicable to [ImageAttachment](./ts-universal-styled-string.md#imageattachment).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1094| CUSTOM_SPAN | 400 | Custom span key, applicable to [CustomSpan](./ts-universal-styled-string.md#customspan).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1095| USER_DATA | 500 | User data span key, applicable to [UserDataSpan](./ts-universal-styled-string.md#userdataspan).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1096 1097## BackgroundColorStyle<sup>14+</sup> 1098 1099Describes the text background color style. 1100 1101**System capability**: SystemCapability.ArkUI.ArkUI.Full 1102 1103### Properties 1104 1105**Atomic service API**: This API can be used in atomic services since API version 14. 1106 1107**System capability**: SystemCapability.ArkUI.ArkUI.Full 1108 1109| Name | Type | Read Only | Optional | Description | 1110| ------------ |---------------------| ---- | ---- | ------ | 1111| textBackgroundStyle | [TextBackgroundStyle](ts-basic-components-span.md#textbackgroundstyle11) | Yes | No| Text background color of the styled string.<br>Default value:<br>{<br> color: Color.Transparent,<br> radius: 0<br>} | 1112 1113### constructor<sup>14+</sup> 1114 1115constructor(textBackgroundStyle: TextBackgroundStyle) 1116 1117A constructor used to create a text background style. 1118 1119**Atomic service API**: This API can be used in atomic services since API version 14. 1120 1121**System capability**: SystemCapability.ArkUI.ArkUI.Full 1122 1123**Parameters** 1124 1125| Name | Type | Mandatory| Description | 1126| ------- | --------------------------------- | ---- | --------------------------------- | 1127| textBackgroundStyle | [TextBackgroundStyle](ts-basic-components-span.md#textbackgroundstyle11) | Yes | Options of the text background color.<br>Default value:<br>{<br> color: Color.Transparent,<br> radius: 0<br>} | 1128 1129## UrlStyle<sup>14+</sup> 1130 1131Describes the hyperlink style. 1132 1133The default color, font size, and font weight are **'#ff0a59f7'**, **'16fp'**, and **'FontWeight.Regular'**, respectively. If the styled string has **TextStyle** set, the **TextStyle** settings take precedence. 1134 1135**System capability**: SystemCapability.ArkUI.ArkUI.Full 1136 1137### Properties 1138 1139**Atomic service API**: This API can be used in atomic services since API version 14. 1140 1141**System capability**: SystemCapability.ArkUI.ArkUI.Full 1142 1143| Name | Type | Read Only | Optional | Description | 1144| ------------ |---------------------| ---- | ---- | ------ | 1145| url | string | Yes | No| Hyperlink content of the styled string.| 1146 1147### constructor<sup>14+</sup> 1148 1149constructor(url: string) 1150 1151A constructor used to create a URL object. 1152 1153**Atomic service API**: This API can be used in atomic services since API version 14. 1154 1155**System capability**: SystemCapability.ArkUI.ArkUI.Full 1156 1157**Parameters** 1158 1159| Name | Type | Mandatory| Description | 1160| ------- | --------------------------------- | ---- | --------------------------------- | 1161| url | string | Yes | Options of the hyperlink.| 1162 1163## Example 1164 1165### Example 1: Processing Styled Strings 1166 1167This example shows how to perform insertion, deletion, replacement, and viewing of styled strings using the **insertString**, **removeStyles**, **replaceStyle**, and **getStyles** APIs. 1168 1169```ts 1170// xxx.ets 1171@Entry 1172@Component 1173struct styled_string_demo1 { 1174 @State height1: number = 450; 1175 @State fontSize1: number = 16; 1176 @State fontWeight1: number = 400; 1177 @State color1: Color = Color.Blue; 1178 scroll: Scroller = new Scroller(); 1179 fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Blue }); 1180 fontStyleAttr2: StyledStringValue = new TextStyle({ fontColor: Color.Orange }); 1181 // Create a readable and writable styled string object: mutableStyledString1. 1182 mutableStyledString1: MutableStyledString = new MutableStyledString ("45-minute workout"); 1183 // Create the mutableStyledString2 object whose input parameters contain strings and styles. 1184 mutableStyledString2: MutableStyledString = new MutableStyledString("test hello world", [{ 1185 start: 0, 1186 length: 5, 1187 styledKey: StyledStringKey.FONT, 1188 styledValue: this.fontStyleAttr1 1189 }]); 1190 // Create a read-only styled string object: styledString2. 1191 styledString2: StyledString = new StyledString("45-minute workout"); 1192 spanStyle1: SpanStyle = { 1193 start: 0, 1194 length: 5, 1195 styledKey: StyledStringKey.FONT, 1196 styledValue: new TextStyle({ fontColor: Color.Pink }) 1197 }; 1198 spanStyle2: SpanStyle = { 1199 start: 0, 1200 length: 2, 1201 styledKey: StyledStringKey.FONT, 1202 styledValue: new TextStyle({ fontColor: Color.Red }) 1203 }; 1204 @State string1: string = ''; 1205 @State fontColor1: ResourceColor = Color.Red; 1206 controller1: TextController = new TextController(); 1207 controller2: TextController = new TextController(); 1208 controller3: TextController = new TextController(); 1209 1210 async onPageShow() { 1211 this.controller1.setStyledString(this.styledString2) 1212 this.controller2.setStyledString(this.mutableStyledString1) 1213 this.controller3.setStyledString(this.mutableStyledString2) 1214 } 1215 1216 build() { 1217 Column() { 1218 Scroll(this.scroll) { 1219 Column() { 1220 // Display the styled string. 1221 Text(undefined, { controller: this.controller1 }) 1222 Text(undefined, { controller: this.controller3 }).key('mutableStyledString2') 1223 Button('Change string1 Value') 1224 .onClick(() => { 1225 let result = this.mutableStyledString1.equals(this.styledString2); 1226 if (result) { 1227 this.string1 = this.mutableStyledString1.getString(); 1228 console.info("mutableStyledString1 content:", this.mutableStyledString1.getString()); 1229 console.info("mutableStyledString1 length:", this.mutableStyledString1.length); 1230 } 1231 }) 1232 1233 // If the styled string conflicts with the span, the span is ignored. The attributes of the Text component take effect if they do not conflict with the styled string. 1234 Text(undefined, { controller: this.controller2 }) { 1235 Span("span and styledString test") 1236 .fontColor(Color.Yellow) 1237 .decoration({ type: TextDecorationType.LineThrough }) 1238 ImageSpan($r('app.media.icon')) 1239 } 1240 .key('styledString2') 1241 .fontColor(this.fontColor1) 1242 .letterSpacing(10) 1243 .fontSize(32) 1244 .fontWeight(600) 1245 .fontStyle(FontStyle.Italic) 1246 .lineHeight(30) 1247 .textShadow({ radius: 5, color: Color.Blue, offsetX: 5, offsetY: 5 }) 1248 .textCase(TextCase.UpperCase) 1249 .decoration({ type: TextDecorationType.LineThrough, color: Color.Yellow }) 1250 .baselineOffset(2) 1251 .copyOption(CopyOptions.InApp) 1252 .margin({ top: 10 }) 1253 .draggable(true) 1254 1255 // The following is for comparison with the preceding. 1256 Text() { 1257 Span(this.string1) 1258 .fontColor(this.color1) 1259 .decoration({ type: TextDecorationType.LineThrough }) 1260 ImageSpan($r('app.media.icon')) 1261 .width(50).height(50) 1262 } 1263 .letterSpacing(10) 1264 .fontSize(32) 1265 .fontWeight(600) 1266 .fontStyle(FontStyle.Italic) 1267 .lineHeight(30) 1268 .textShadow({ radius: 5, color: Color.Blue, offsetX: 5, offsetY: 5 }) 1269 .textCase(TextCase.UpperCase) 1270 .decoration({ type: TextDecorationType.LineThrough, color: Color.Yellow }) 1271 .baselineOffset(2) 1272 1273 Button('Set Style and Replace Text') 1274 .onClick(() => { 1275 this.mutableStyledString1.replaceStyle({ 1276 start: 2, 1277 length: 2, 1278 styledKey: StyledStringKey.FONT, 1279 styledValue: this.fontStyleAttr1 1280 }) 1281 this.mutableStyledString1.insertString(0, "Blood Pressure: 85 (High)") 1282 this.mutableStyledString1.setStyle({ 1283 start: 2, 1284 length: 2, 1285 styledKey: StyledStringKey.FONT, 1286 styledValue: this.fontStyleAttr2 1287 }) 1288 this.controller2.setStyledString(this.mutableStyledString1) 1289 }) 1290 .margin({ top: 10 }) 1291 1292 Button('Query and Clear Style') 1293 .onClick(() => { 1294 let styles = this.mutableStyledString1.getStyles(0, this.mutableStyledString1.length) 1295 if (styles.length == 2) { 1296 for (let i = 0; i < styles.length; i++) { 1297 console.info('StyledString style object start:' + styles[i].start) 1298 console.info('StyledString style object length:' + styles[i].length) 1299 console.info('StyledString style object key:' + styles[i].styledKey) 1300 if (styles[i].styledKey === 0) { 1301 let fontAttr = styles[i].styledValue as TextStyle; 1302 console.info('StyledString fontColor:' + fontAttr.fontColor) 1303 } 1304 } 1305 } 1306 if (styles[0] !== undefined) { 1307 this.mutableStyledString2.setStyle(styles[0]); 1308 this.controller3.setStyledString(this.mutableStyledString2); 1309 } 1310 this.mutableStyledString1.removeStyles(2, 3); 1311 this.controller2.setStyledString(this.mutableStyledString1); 1312 }) 1313 .margin({ top: 10 }) 1314 }.width('100%') 1315 1316 } 1317 .expandSafeArea([SafeAreaType.KEYBOARD]) 1318 .scrollable(ScrollDirection.Vertical) 1319 .scrollBar(BarState.On) 1320 .scrollBarColor(Color.Gray) 1321 .scrollBarWidth(10) 1322 .edgeEffect(EdgeEffect.None) 1323 } 1324 .width('100%') 1325 } 1326} 1327``` 1328 1329 1330 1331### Example 2: Binding Events 1332 1333This example demonstrates how to bind events to styled strings using the **styledKey** and **styledValue** APIs. 1334 1335```ts 1336// xxx.ets 1337import { promptAction } from '@kit.ArkUI'; 1338 1339@Entry 1340@Component 1341struct styled_string_demo2 { 1342 scroll: Scroller = new Scroller(); 1343 fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Blue }); 1344 clickGestureAttr: GestureStyle = new GestureStyle({ 1345 onClick: () => { 1346 promptAction.showToast({ message: 'clickGestureAttr object trigger click event' }) 1347 this.backgroundColor1 = Color.Yellow 1348 } 1349 }) 1350 gestureStyleAttr: GestureStyle = new GestureStyle({ 1351 onClick: () => { 1352 promptAction.showToast({ message: 'gestureStyleAttr object trigger click event' }) 1353 this.backgroundColor1 = Color.Green 1354 }, 1355 onLongPress: () => { 1356 promptAction.showToast({ message: 'gestureStyleAttr object trigger long press event' }) 1357 this.backgroundColor1 = Color.Orange 1358 } 1359 }); 1360 // Create the event object mutableStyledString3. 1361 mutableStyledString3: MutableStyledString = new MutableStyledString("hello world", [{ 1362 start: 0, 1363 length: 5, 1364 styledKey: StyledStringKey.GESTURE, 1365 styledValue: this.clickGestureAttr 1366 }, 1367 { 1368 start: 0, 1369 length: 5, 1370 styledKey: StyledStringKey.FONT, 1371 styledValue: this.fontStyleAttr1 1372 }, 1373 { 1374 start: 6, 1375 length: 5, 1376 styledKey: StyledStringKey.GESTURE, 1377 styledValue: this.gestureStyleAttr 1378 }, 1379 { 1380 start: 6, 1381 length: 5, 1382 styledKey: StyledStringKey.FONT, 1383 styledValue: new TextStyle({ fontColor: Color.Pink }) 1384 }]); 1385 @State fontColor1: ResourceColor = Color.Red; 1386 @State backgroundColor1: ResourceColor | undefined = undefined; 1387 controller3: TextController = new TextController(); 1388 1389 async onPageShow() { 1390 this.controller3.setStyledString(this.mutableStyledString3) 1391 } 1392 1393 build() { 1394 Column() { 1395 Scroll(this.scroll) { 1396 Column({ space: 30 }) { 1397 Button("Change Background Color in Response to Event").backgroundColor(this.backgroundColor1).width('80%') 1398 // Styled string that contains an event 1399 Text(undefined, { controller: this.controller3 }).fontSize(30) 1400 .copyOption(CopyOptions.InApp) 1401 .draggable(true) 1402 .clip(true) 1403 }.width('100%') 1404 } 1405 .expandSafeArea([SafeAreaType.KEYBOARD]) 1406 .scrollable(ScrollDirection.Vertical) 1407 .scrollBar(BarState.On) 1408 .scrollBarColor(Color.Gray) 1409 .scrollBarWidth(10) 1410 .edgeEffect(EdgeEffect.None) 1411 } 1412 .width('100%') 1413 } 1414} 1415``` 1416 1417 1418 1419### Example 3: Setting the Text Style 1420 1421This example shows how to query and set styles for styled strings using the **getStyles** and **setStyle** APIs. 1422 1423```ts 1424// xxx.ets 1425import { LengthMetrics, LengthUnit } from '@kit.ArkUI' 1426 1427@Entry 1428@Component 1429struct styled_string_demo3 { 1430 fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Blue }); 1431 fontStyleAttr2: StyledStringValue = new TextStyle({ 1432 fontColor: Color.Orange, 1433 fontSize: LengthMetrics.vp(20), 1434 fontWeight: FontWeight.Bolder, 1435 fontStyle: FontStyle.Italic, 1436 fontFamily: "Arial" 1437 }); 1438 fontStyleAttr3: StyledStringValue = new TextStyle({ 1439 fontColor: Color.Orange, 1440 fontSize: LengthMetrics.vp(20), 1441 fontWeight: FontWeight.Lighter, 1442 fontStyle: FontStyle.Italic, 1443 fontFamily: "Arial" 1444 }); 1445 // Create a styled string object with multiple text styles: mutableStyledString1. 1446 mutableStyledString1: MutableStyledString = new MutableStyledString("45-minute workout", [{ 1447 start: 0, 1448 length: 2, 1449 styledKey: StyledStringKey.FONT, 1450 styledValue: this.fontStyleAttr3 1451 }, { 1452 start: 2, 1453 length: 2, 1454 styledKey: StyledStringKey.FONT, 1455 styledValue: this.fontStyleAttr2 1456 } 1457 ]); 1458 // Create a styled string object with multiple styles: mutableStyledString2. 1459 mutableStyledString2: MutableStyledString = new MutableStyledString("test hello world", [{ 1460 start: 0, 1461 length: 5, 1462 styledKey: StyledStringKey.FONT, 1463 styledValue: this.fontStyleAttr1 1464 }, { 1465 start: 0, 1466 length: 5, 1467 styledKey: StyledStringKey.DECORATION, 1468 styledValue: new DecorationStyle({ type: TextDecorationType.LineThrough, color: Color.Blue }) 1469 }, { 1470 start: 0, 1471 length: 5, 1472 styledKey: StyledStringKey.TEXT_SHADOW, 1473 styledValue: new TextShadowStyle({ 1474 radius: 5, 1475 type: ShadowType.COLOR, 1476 color: Color.Yellow, 1477 offsetX: 10, 1478 offsetY: -10 1479 }) 1480 }, { 1481 start: 0, 1482 length: 5, 1483 styledKey: StyledStringKey.BASELINE_OFFSET, 1484 styledValue: new BaselineOffsetStyle(LengthMetrics.px(20)) 1485 }, { 1486 start: 0, 1487 length: 5, 1488 styledKey: StyledStringKey.LETTER_SPACING, 1489 styledValue: new LetterSpacingStyle(new LengthMetrics(10, LengthUnit.VP)) 1490 }, { 1491 start: 6, 1492 length: 5, 1493 styledKey: StyledStringKey.BASELINE_OFFSET, 1494 styledValue: new BaselineOffsetStyle(LengthMetrics.fp(10)) 1495 } 1496 ]); 1497 @State fontColor1: ResourceColor = Color.Red; 1498 controller: TextController = new TextController(); 1499 options: TextOptions = { controller: this.controller }; 1500 controller2: TextController = new TextController(); 1501 spanStyle1: SpanStyle = { 1502 start: 0, 1503 length: 5, 1504 styledKey: StyledStringKey.FONT, 1505 styledValue: new TextStyle({ fontColor: Color.Pink }) 1506 }; 1507 1508 async onPageShow() { 1509 this.controller.setStyledString(this.mutableStyledString1) 1510 this.controller2.setStyledString(this.mutableStyledString2) 1511 } 1512 1513 build() { 1514 Column() { 1515 Column({ space: 10 }) { 1516 // Display the styled string configured with various font styles. If the styled string conflicts with the style settings in the Text component, the style set in the styled string takes effect. 1517 Text(undefined, this.options) 1518 .fontColor(this.fontColor1) 1519 .font({ size: 20, weight: 500, style: FontStyle.Normal }) 1520 // Display the styled string for which the text shadow, text decorative line, letter spacing, and baseline offset are configured. If the styled string conflicts with the style settings in the Text component, the style set in the styled string takes effect. 1521 Text(undefined, { controller: this.controller2 }) 1522 .fontSize(30) 1523 .copyOption(CopyOptions.InApp) 1524 .draggable(true) 1525 .decoration({ type: TextDecorationType.Overline, color: Color.Pink }) 1526 .textShadow({ 1527 radius: 10, 1528 type: ShadowType.COLOR, 1529 color: Color.Green, 1530 offsetX: -10, 1531 offsetY: 10 1532 }) 1533 Button('Query Font Style') 1534 .onClick(() => { 1535 let styles = this.mutableStyledString1.getStyles(0, this.mutableStyledString1.length) 1536 if (styles.length !== 0) { 1537 for (let i = 0; i < styles.length; i++) { 1538 console.info('mutableStyledString1 style object start:' + styles[i].start) 1539 console.info('mutableStyledString1 style object length:' + styles[i].length) 1540 console.info('mutableStyledString1 style object key:' + styles[i].styledKey) 1541 if (styles[i].styledKey === 0) { 1542 let fontAttr = styles[i].styledValue as TextStyle; 1543 console.info('mutableStyledString1 fontColor:' + fontAttr.fontColor) 1544 console.info('mutableStyledString1 fontSize:' + fontAttr.fontSize) 1545 console.info('mutableStyledString1 fontWeight:' + fontAttr.fontWeight) 1546 console.info('mutableStyledString1 fontStyle:' + fontAttr.fontStyle) 1547 console.info('mutableStyledString1 fontStyle:' + fontAttr.fontFamily) 1548 } 1549 } 1550 } 1551 }) 1552 .margin({ top: 10 }) 1553 Button('Query Other Styles') 1554 .onClick(() => { 1555 let styles = this.mutableStyledString2.getStyles(0, this.mutableStyledString2.length) 1556 if (styles.length !== 0) { 1557 for (let i = 0; i < styles.length; i++) { 1558 console.info('mutableStyledString2 style object start:' + styles[i].start) 1559 console.info('mutableStyledString2 style object length:' + styles[i].length) 1560 console.info('mutableStyledString2 style object key:' + styles[i].styledKey) 1561 if (styles[i].styledKey === 1) { 1562 let decoAttr = styles[i].styledValue as DecorationStyle; 1563 console.info('mutableStyledString2 decoration type:' + decoAttr.type) 1564 console.info('mutableStyledString2 decoration color:' + decoAttr.color) 1565 } 1566 if (styles[i].styledKey === 2) { 1567 let baselineAttr = styles[i].styledValue as BaselineOffsetStyle; 1568 console.info('mutableStyledString2 baselineOffset:' + baselineAttr.baselineOffset) 1569 } 1570 if (styles[i].styledKey === 3) { 1571 let letterAttr = styles[i].styledValue as LetterSpacingStyle; 1572 console.info('mutableStyledString2 letterSpacing:' + letterAttr.letterSpacing) 1573 } 1574 if (styles[i].styledKey === 4) { 1575 let textShadowAttr = styles[i].styledValue as TextShadowStyle; 1576 let shadowValues = textShadowAttr.textShadow; 1577 if (shadowValues.length > 0) { 1578 for (let j = 0; j < shadowValues.length; j++) { 1579 console.info('mutableStyledString2 textShadow type:' + shadowValues[j].type); 1580 console.info('mutableStyledString2 textShadow radius:' + shadowValues[j].radius); 1581 console.info('mutableStyledString2 textShadow color:' + shadowValues[j].color); 1582 console.info('mutableStyledString2 textShadow offsetX:' + shadowValues[j].offsetX); 1583 console.info('mutableStyledString2 textShadow offsetY:' + shadowValues[j].offsetY); 1584 } 1585 } 1586 } 1587 } 1588 } 1589 }) 1590 .margin({ top: 10 }) 1591 Button('Update mutableStyledString1 Style') 1592 .onClick(() => { 1593 this.mutableStyledString1.setStyle(this.spanStyle1) 1594 this.controller.setStyledString(this.mutableStyledString1) 1595 }) 1596 .margin({ top: 10 }) 1597 }.width('100%') 1598 } 1599 .width('100%') 1600 } 1601} 1602``` 1603 1604 1605### Example 4: Setting Images 1606 1607This example illustrates how to set images in styled strings using the **ImageAttachment** API. 1608 1609```ts 1610// xxx.ets 1611import { image } from '@kit.ImageKit' 1612import { LengthMetrics } from '@kit.ArkUI' 1613 1614@Entry 1615@Component 1616struct styled_string_demo4 { 1617 @State message: string = 'Hello World' 1618 imagePixelMap: image.PixelMap | undefined = undefined 1619 @State imagePixelMap3: image.PixelMap | undefined = undefined 1620 mutableStr: MutableStyledString = new MutableStyledString('123'); 1621 controller: TextController = new TextController(); 1622 mutableStr2: MutableStyledString = new MutableStyledString('This is set decoration line style to the mutableStr2', [{ 1623 start: 0, 1624 length: 15, 1625 styledKey: StyledStringKey.DECORATION, 1626 styledValue: new DecorationStyle({ 1627 type: TextDecorationType.Overline, 1628 color: Color.Orange, 1629 style: TextDecorationStyle.DOUBLE 1630 }) 1631 }]) 1632 1633 async aboutToAppear() { 1634 console.info("aboutToAppear initial imagePixelMap") 1635 this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.icon')) 1636 } 1637 1638 private async getPixmapFromMedia(resource: Resource) { 1639 let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({ 1640 bundleName: resource.bundleName, 1641 moduleName: resource.moduleName, 1642 id: resource.id 1643 }) 1644 let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength)) 1645 let createPixelMap: image.PixelMap = await imageSource.createPixelMap({ 1646 desiredPixelFormat: image.PixelMapFormat.RGBA_8888 1647 }) 1648 await imageSource.release() 1649 return createPixelMap 1650 } 1651 1652 build() { 1653 Row() { 1654 Column({ space: 5 }) { 1655 Text(undefined, { controller: this.controller }) 1656 .copyOption(CopyOptions.InApp) 1657 .draggable(true) 1658 .fontSize(30) 1659 1660 Button('Set Image') 1661 .onClick(() => { 1662 if (this.imagePixelMap !== undefined) { 1663 this.mutableStr = new MutableStyledString(new ImageAttachment({ 1664 value: this.imagePixelMap, 1665 size: { width: 50, height: 50 }, 1666 layoutStyle: { borderRadius: LengthMetrics.vp(10) }, 1667 verticalAlign: ImageSpanAlignment.BASELINE, 1668 objectFit: ImageFit.Contain 1669 })) 1670 this.controller.setStyledString(this.mutableStr) 1671 } 1672 }) 1673 1674 Button('Set Resource Type Image') 1675 .onClick(() => { 1676 if (this.imagePixelMap !== undefined) { 1677 this.mutableStr = new MutableStyledString(new ImageAttachment({ 1678 resourceValue: $r('app.media.icon'), 1679 size: { width: 50, height: 50 }, 1680 layoutStyle: { borderRadius: LengthMetrics.vp(10) }, 1681 verticalAlign: ImageSpanAlignment.BASELINE, 1682 objectFit: ImageFit.Contain, 1683 syncLoad: true 1684 })) 1685 this.controller.setStyledString(this.mutableStr) 1686 } 1687 }) 1688 1689 Button('Image: Append') 1690 .onClick(() => { 1691 let str = new StyledString('123') 1692 this.mutableStr.appendStyledString(str) 1693 this.controller.setStyledString(this.mutableStr) 1694 }) 1695 1696 Button('Image: Before Insert') 1697 .onClick(() => { 1698 this.mutableStr.insertString(0, '123') 1699 this.controller.setStyledString(this.mutableStr) 1700 }) 1701 1702 Button('Image: After Insert') 1703 .onClick(() => { 1704 this.mutableStr.insertString(1, '123') 1705 this.controller.setStyledString(this.mutableStr) 1706 }) 1707 1708 Button('Image: Replace') 1709 .onClick(() => { 1710 this.mutableStr.replaceString(2, 5, "789") 1711 this.controller.setStyledString(this.mutableStr) 1712 }) 1713 1714 Button('Image: Get') 1715 .onClick(() => { 1716 let imageArray = this.mutableStr.getStyles(0, 1, StyledStringKey.IMAGE) 1717 for (let i = 0; i < imageArray.length; ++i) { 1718 console.info('mutableStr start ' + imageArray[i].start + ' length ' + imageArray[i].length + ' type ' + imageArray[i].styledKey) 1719 if (imageArray[i].styledKey === 300) { 1720 let attachment = imageArray[i].styledValue as ImageAttachment 1721 this.imagePixelMap3 = attachment.value 1722 console.info('mutableStr value ' + JSON.stringify(attachment.value)) 1723 if (attachment.size !== undefined) { 1724 console.info('mutableStr size width ' + attachment.size.width + ' height ' + attachment.size.height) 1725 } 1726 console.info('mutableStr vertical ' + attachment.verticalAlign) 1727 console.info('mutableStr fit ' + attachment.objectFit) 1728 if (attachment.layoutStyle !== undefined) { 1729 let radius = attachment.layoutStyle.borderRadius as BorderRadiuses 1730 console.info('mutableStr radius ' + JSON.stringify(radius)) 1731 } 1732 } 1733 1734 } 1735 }) 1736 1737 Image(this.imagePixelMap3).width(50).height(50) 1738 1739 } 1740 .width('100%') 1741 } 1742 .height('100%') 1743 } 1744} 1745``` 1746 1747 1748 1749### Example 5: Setting the Text Line Height and Paragraph Style 1750 1751This example demonstrates how to set the line height and paragraph styles for styled strings using the **LineHeightStyle** and **ParagraphStyle** APIs. 1752 1753```ts 1754import { LengthMetrics } from '@kit.ArkUI' 1755const canvasWidth = 1000 1756const canvasHeight = 100 1757class LeadingMarginCreator { 1758 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1759 private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(canvasWidth, canvasHeight) 1760 private offContext: OffscreenCanvasRenderingContext2D = this.offscreenCanvas.getContext("2d", this.settings) 1761 public static instance: LeadingMarginCreator = new LeadingMarginCreator() 1762 1763 public genSquareMark(fontSize: number): PixelMap { 1764 this.offContext = this.offscreenCanvas.getContext("2d", this.settings) 1765 this.clearCanvas() 1766 const coordinate = fontSize * (1 - 1 / 1.5) / 2 1767 const sideLength = fontSize / 1.5 1768 this.offContext.fillRect(coordinate, coordinate, sideLength, sideLength) 1769 return this.offContext.getPixelMap(0, 0, fontSize, fontSize) 1770 } 1771 1772 private clearCanvas() { 1773 this.offContext.clearRect(0, 0, canvasWidth, canvasHeight) 1774 } 1775} 1776@Entry 1777@Component 1778struct Index { 1779 private leadingMarkCreatorInstance = LeadingMarginCreator.instance 1780 leadingMarginPlaceholder1: LeadingMarginPlaceholder = { 1781 pixelMap: this.leadingMarkCreatorInstance.genSquareMark(24), 1782 size:[15, 15] 1783 } 1784 titleParagraphStyleAttr: ParagraphStyle = new ParagraphStyle({ textAlign: TextAlign.Center, paragraphSpacing: LengthMetrics.px(10)}); 1785 // Indent the first line of the first paragraph by 15 vp. 1786 paragraphStyleAttr1: ParagraphStyle = new ParagraphStyle({ textIndent: LengthMetrics.vp(15) }); 1787 // Indent the second paragraph by 15 vp, with a placeholder in the first line. 1788 paragraphStyleAttr2: ParagraphStyle = new ParagraphStyle({ textAlign: TextAlign.Start, leadingMargin: this.leadingMarginPlaceholder1 }); 1789 // Set the maximum number of lines and text overflow mode for the third paragraph, without setting the indent. 1790 paragraphStyleAttr3: ParagraphStyle = new ParagraphStyle({ textAlign: TextAlign.End, maxLines: 1, wordBreak: WordBreak.BREAK_ALL, overflow: TextOverflow.Ellipsis}); 1791 // Line height style object 1792 lineHeightStyle1: LineHeightStyle= new LineHeightStyle(new LengthMetrics(24)); 1793 // Create a paragraph style object paragraphStyledString1. 1794 paragraphStyledString1: StyledString = new StyledString("Paragraph title\nStart of the first paragraph 0123456789 End of the first paragraph\nStart of the second paragraph hello world End of the second paragraph\nThird paragraph ABCDEFGHIJKLMNOPQRSTUVWXYZ", [ 1795 { 1796 start: 0, 1797 length: 4, 1798 styledKey: StyledStringKey.PARAGRAPH_STYLE, 1799 styledValue: this.titleParagraphStyleAttr 1800 }, 1801 { 1802 start: 0, 1803 length: 4, 1804 styledKey: StyledStringKey.LINE_HEIGHT, 1805 styledValue: new LineHeightStyle(new LengthMetrics(50)) 1806 },{ 1807 start: 0, 1808 length: 4, 1809 styledKey: StyledStringKey.FONT, 1810 styledValue: new TextStyle({ fontSize: LengthMetrics.vp(24), fontWeight: FontWeight.Bolder }) 1811 }, 1812 { 1813 start: 5, 1814 length: 3, 1815 styledKey: StyledStringKey.PARAGRAPH_STYLE, 1816 styledValue: this.paragraphStyleAttr1 1817 }, 1818 { 1819 start: 5, 1820 length: 20, 1821 styledKey: StyledStringKey.LINE_HEIGHT, 1822 styledValue: this.lineHeightStyle1 1823 }, 1824 { 1825 start: 32, 1826 length: 5, 1827 styledKey: StyledStringKey.PARAGRAPH_STYLE, 1828 styledValue: this.paragraphStyleAttr2 1829 }, 1830 { 1831 start: 32, 1832 length: 20, 1833 styledKey: StyledStringKey.LINE_HEIGHT, 1834 styledValue: this.lineHeightStyle1 1835 }, 1836 { 1837 start: 60, 1838 length: 5, 1839 styledKey: StyledStringKey.PARAGRAPH_STYLE, 1840 styledValue: this.paragraphStyleAttr3 1841 }, 1842 { 1843 start: 60, 1844 length: 5, 1845 styledKey: StyledStringKey.LINE_HEIGHT, 1846 styledValue: this.lineHeightStyle1 1847 } 1848 ]); 1849 controller: TextController = new TextController(); 1850 async onPageShow() { 1851 this.controller.setStyledString(this.paragraphStyledString1) 1852 } 1853 1854 build() { 1855 Row() { 1856 Column( { space : 5 }) { 1857 Text(undefined, { controller: this.controller }) 1858 .width(240) 1859 .borderWidth(1) 1860 .copyOption(CopyOptions.InApp) 1861 .draggable(true) 1862 1863 // Query the paragraph style. 1864 Text() 1865 .onClick(() => { 1866 let styles = this.paragraphStyledString1.getStyles(0, this.paragraphStyledString1.length) 1867 if (styles.length !== 0) { 1868 for (let i = 0; i < styles.length; i++) { 1869 console.info('paragraphStyledString1 style object start:' + styles[i].start) 1870 console.info('paragraphStyledString1 style object length:' + styles[i].length) 1871 console.info('paragraphStyledString1 style object key:' + styles[i].styledKey) 1872 if (styles[i].styledKey === 200) { 1873 let paraAttr = styles[i].styledValue as ParagraphStyle; 1874 console.info('paragraphStyledString1 textAlign:' + paraAttr.textAlign) 1875 console.info('paragraphStyledString1 textIndent:' + paraAttr.textIndent) 1876 console.info('paragraphStyledString1 maxLines:' + paraAttr.maxLines) 1877 console.info('paragraphStyledString1 wordBreak:' + paraAttr.wordBreak) 1878 console.info('paragraphStyledString1 leadingMargin:' + paraAttr.leadingMargin) 1879 console.info('paragraphStyledString1 overflow:' + paraAttr.overflow) 1880 } 1881 } 1882 } 1883 }) 1884 .margin({ top: 10 }) 1885 } 1886 .width('100%') 1887 } 1888 .height('100%') 1889 } 1890} 1891``` 1892 1893 1894 1895### Example 6: Setting Custom Spans 1896 1897This example shows how to set custom spans within styled strings using the **CustomSpan** API. 1898 1899```ts 1900// xxx.ets 1901import { drawing } from '@kit.ArkGraphics2D' 1902import { LengthMetrics } from '@kit.ArkUI' 1903 1904class MyCustomSpan extends CustomSpan { 1905 constructor(word: string, width: number, height: number) { 1906 super(); 1907 this.word = word; 1908 this.width = width; 1909 this.height = height; 1910 } 1911 1912 onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics { 1913 return { width: this.width, height: this.height }; 1914 } 1915 1916 onDraw(context: DrawContext, options: CustomSpanDrawInfo) { 1917 let canvas = context.canvas; 1918 1919 const brush = new drawing.Brush(); 1920 brush.setColor({ 1921 alpha: 255, 1922 red: 0, 1923 green: 74, 1924 blue: 175 1925 }); 1926 const font = new drawing.Font(); 1927 font.setSize(25); 1928 const textBlob = drawing.TextBlob.makeFromString(this.word, font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 1929 canvas.attachBrush(brush); 1930 canvas.drawRect({ 1931 left: options.x + 10, 1932 right: options.x + vp2px(this.width) - 10, 1933 top: options.lineTop + 10, 1934 bottom: options.lineBottom - 10 1935 }); 1936 1937 brush.setColor({ 1938 alpha: 255, 1939 red: 23, 1940 green: 169, 1941 blue: 141 1942 }); 1943 canvas.attachBrush(brush); 1944 canvas.drawTextBlob(textBlob, options.x + 20, options.lineBottom - 15); 1945 canvas.detachBrush(); 1946 } 1947 1948 setWord(word: string) { 1949 this.word = word; 1950 } 1951 1952 width: number = 160; 1953 word: string = "drawing"; 1954 height: number = 10; 1955} 1956 1957@Entry 1958@Component 1959struct styled_string_demo6 { 1960 customSpan1: MyCustomSpan = new MyCustomSpan("Hello", 80, 10); 1961 customSpan2: MyCustomSpan = new MyCustomSpan("World", 80, 40); 1962 style: MutableStyledString = new MutableStyledString(this.customSpan1); 1963 textStyle: MutableStyledString = new MutableStyledString("123"); 1964 textController: TextController = new TextController(); 1965 isPageShow: boolean = true; 1966 1967 async onPageShow() { 1968 if (!this.isPageShow) { 1969 return 1970 } 1971 this.isPageShow = false; 1972 1973 this.style.appendStyledString(new MutableStyledString("Text drawing sample CustomSpan", [ 1974 { 1975 start: 0, 1976 length: 5, 1977 styledKey: StyledStringKey.FONT, 1978 styledValue: new TextStyle({ fontColor: Color.Pink }) 1979 }, { 1980 start: 5, 1981 length: 5, 1982 styledKey: StyledStringKey.FONT, 1983 styledValue: new TextStyle({ fontColor: Color.Orange, fontStyle: FontStyle.Italic }) 1984 }, { 1985 start: 10, 1986 length: 500, 1987 styledKey: StyledStringKey.FONT, 1988 styledValue: new TextStyle({ fontColor: Color.Green, fontWeight: FontWeight.Bold }) 1989 } 1990 ])) 1991 this.style.appendStyledString(new StyledString(this.customSpan2)) 1992 this.style.appendStyledString(new StyledString("Custom drawing", [{ 1993 start: 0, 1994 length: 5, 1995 styledKey: StyledStringKey.FONT, 1996 styledValue: new TextStyle({ fontColor: Color.Green, fontSize: LengthMetrics.px(50) }) 1997 }])) 1998 this.textController.setStyledString(this.style) 1999 } 2000 2001 build() { 2002 Row() { 2003 Column() { 2004 Text(undefined, { controller: this.textController }) 2005 .copyOption(CopyOptions.InApp) 2006 .fontSize(30) 2007 2008 Button("invalidate").onClick(() => { 2009 this.customSpan1.setWord("Hello") 2010 this.customSpan1.invalidate() 2011 }) 2012 } 2013 .width('100%') 2014 } 2015 .height('100%') 2016 } 2017} 2018``` 2019 2020 2021 2022### Example 7: Storing Custom Extension Information 2023 2024This example illustrates how to store custom extension information within styled strings using the **UserDataSpan** API. 2025 2026```ts 2027// xxx.ets 2028class MyUserDateSpan extends UserDataSpan { 2029 constructor(name: string, age: number) { 2030 super() 2031 this.name = name 2032 this.age = age 2033 } 2034 2035 name: string 2036 age: number 2037} 2038 2039@Entry 2040@Component 2041struct styled_string_demo7 { 2042 @State name: string = "world" 2043 @State age: number = 10 2044 controller: TextController = new TextController() 2045 styleString: MutableStyledString = new MutableStyledString("hello world", [{ 2046 start: 0, 2047 length: 11, 2048 styledKey: StyledStringKey.USER_DATA, 2049 styledValue: new MyUserDateSpan("hello", 21) 2050 }]) 2051 2052 onPageShow(): void { 2053 this.controller.setStyledString(this.styleString) 2054 } 2055 2056 build() { 2057 Column() { 2058 Text(undefined, { controller: this.controller }) 2059 Button("get user data").onClick(() => { 2060 let arr = this.styleString.getStyles(0, this.styleString.length) 2061 let userDataSpan = arr[0].styledValue as MyUserDateSpan 2062 this.name = userDataSpan.name 2063 this.age = userDataSpan.age 2064 }) 2065 Text("name:" + this.name + " age: " + this.age) 2066 }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 }) 2067 } 2068} 2069``` 2070 2071 2072 2073 2074### Example 8: Implementing Conversion Between Styled Strings and HTML-Formatted Strings 2075 2076This example demonstrates the conversion between styled strings and HTML-formatted strings using the **toHtml** and **fromHtml** APIs. 2077 2078```ts 2079// xxx.ets 2080import { image } from '@kit.ImageKit' 2081import { LengthMetrics } from '@kit.ArkUI' 2082 2083@Entry 2084@Component 2085struct styled_string_demo8 { 2086 imagePixelMap: image.PixelMap | undefined = undefined 2087 @State html : string | undefined = undefined 2088 @State styledString : StyledString | undefined = undefined 2089 controller1 : TextController = new TextController 2090 controller2 : TextController = new TextController 2091 2092 async aboutToAppear() { 2093 console.info("aboutToAppear initial imagePixelMap") 2094 this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.icon')) 2095 } 2096 2097 private async getPixmapFromMedia(resource: Resource) { 2098 let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({ 2099 bundleName: resource.bundleName, 2100 moduleName: resource.moduleName, 2101 id: resource.id 2102 }) 2103 let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength)) 2104 let createPixelMap: image.PixelMap = await imageSource.createPixelMap({ 2105 desiredPixelFormat: image.PixelMapFormat.RGBA_8888 2106 }) 2107 await imageSource.release() 2108 return createPixelMap 2109 } 2110 2111 build() { 2112 Column() { 2113 Text(undefined, { controller: this.controller1 }).height(100) 2114 Row() { 2115 Button("Add Styled String").onClick(() => { 2116 let mutableStyledString1: MutableStyledString = new MutableStyledString("Styled string", [{ 2117 start: 0, 2118 length: 6, 2119 styledKey: StyledStringKey.FONT, 2120 styledValue: new TextStyle({ fontColor: Color.Green, fontSize: LengthMetrics.px(50) }) 2121 }]); 2122 if (this.imagePixelMap !== undefined) { 2123 let mutableStyledString2 = new MutableStyledString(new ImageAttachment({ 2124 value: this.imagePixelMap, 2125 size: { width: 50, height: 50 }, 2126 })) 2127 mutableStyledString1.appendStyledString(mutableStyledString2) 2128 } 2129 this.styledString = mutableStyledString1 2130 this.controller1.setStyledString(mutableStyledString1) 2131 }).margin(5) 2132 Button("toHtml").onClick(() => { 2133 this.html = StyledString.toHtml(this.styledString) 2134 }).margin(5) 2135 Button("fromHtml").onClick(async () => { 2136 let styledString = await StyledString.fromHtml(this.html) 2137 this.controller2.setStyledString(styledString) 2138 }).margin(5) 2139 } 2140 Text(undefined, { controller: this.controller2 }).height(100) 2141 Text(this.html) 2142 }.width("100%") 2143 } 2144} 2145``` 2146 2147 2148 2149 2150### Example 9: Setting a Hyperlink 2151 2152This example demonstrates how to set a hyperlink within a styled string using the **UrlStyle** API. 2153 2154```ts 2155// xxx.ets 2156@Entry 2157@Component 2158struct styled_string { 2159 urlString: StyledStringValue = new UrlStyle( "https://www.example.com" ); 2160 mutableStyledString: MutableStyledString = new MutableStyledString("Hello World", [{ 2161 start: 0, 2162 length: "Hello".length, 2163 styledKey: StyledStringKey.URL, 2164 styledValue: this.urlString 2165 }]); 2166 controller: TextController = new TextController(); 2167 async onPageShow() { 2168 this.controller.setStyledString(this.mutableStyledString) 2169 } 2170 build() { 2171 Column() { 2172 Column() { 2173 Text(undefined, { controller: this.controller }).key('mutableStyledString').fontSize(30) 2174 } 2175 }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 }) 2176 } 2177} 2178``` 2179 2180 2181 2182 2183### Example 10: Setting a Color Filter for an Image 2184 2185This example demonstrates how to apply a color filter to an image by setting **colorFilter** for **imageAttachment**. 2186 2187``` ts 2188// xxx.ets 2189import { LengthMetrics } from '@kit.ArkUI' 2190import { drawing, common2D } from '@kit.ArkGraphics2D'; 2191@Entry 2192@Component 2193struct styled_string_demo4 { 2194 @State message: string = 'Hello World' 2195 mutableStr: MutableStyledString = new MutableStyledString('origin image:'); 2196 mutableStr2: MutableStyledString = new MutableStyledString('with filter:'); 2197 controller: TextController = new TextController(); 2198 controller2: TextController = new TextController(); 2199 private color: common2D.Color = { alpha: 125, red: 125, green: 125, blue: 255 }; 2200 build() { 2201 Row() { 2202 Column({ space: 5 }) { 2203 Text(undefined, { controller: this.controller }) 2204 .copyOption(CopyOptions.InApp) 2205 .draggable(true) 2206 .fontSize(30) 2207 .onAppear(() => { 2208 this.mutableStr = new MutableStyledString(new ImageAttachment({ 2209 resourceValue: $r('app.media.startIcon'), 2210 size: { width: 50, height: 50 }, 2211 layoutStyle: { borderRadius: LengthMetrics.vp(10) }, 2212 verticalAlign: ImageSpanAlignment.BASELINE, 2213 objectFit: ImageFit.Contain, 2214 syncLoad: true 2215 })) 2216 this.controller.setStyledString(this.mutableStr) 2217 }) 2218 Text(undefined, { controller: this.controller2 }) 2219 .copyOption(CopyOptions.InApp) 2220 .draggable(true) 2221 .fontSize(30) 2222 Button('set image color filter') 2223 .onClick(() => { 2224 this.mutableStr2 = new MutableStyledString(new ImageAttachment({ 2225 resourceValue: $r('app.media.startIcon'), 2226 size: { width: 50, height: 50 }, 2227 layoutStyle: { borderRadius: LengthMetrics.vp(10) }, 2228 verticalAlign: ImageSpanAlignment.BASELINE, 2229 objectFit: ImageFit.Contain, 2230 colorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN), 2231 syncLoad: true 2232 })) 2233 this.controller2.setStyledString(this.mutableStr2) 2234 }) 2235 } 2236 .width('100%') 2237 } 2238 .height('100%') 2239 } 2240} 2241``` 2242 2243 2244 2245### Example 11: Inserting, Deleting, and Replacing Styled Strings 2246 2247This example demonstrates how to insert, delete, and replace styled strings using the **getSubStyledString**, **removeString**, **removeStyle**, **clearStyles**, **replaceStyledString**, and **insertStyledString** APIs. 2248 2249``` ts 2250// xxx.ets 2251@Entry 2252@Component 2253struct styled_string_demo4 { 2254 @State message: string = 'Hello World' 2255 mutableStr: MutableStyledString = new MutableStyledString('123456', [{ 2256 start: 0, 2257 length: 2, 2258 styledKey: StyledStringKey.FONT, 2259 styledValue: new TextStyle({fontColor: Color.Red}) 2260 }, { 2261 start: 0, 2262 length: 3, 2263 styledKey: StyledStringKey.DECORATION, 2264 styledValue: new DecorationStyle({type: TextDecorationType.LineThrough}) 2265 }]); 2266 mutableStr2: MutableStyledString = new MutableStyledString('with filter:'); 2267 controller: TextController = new TextController(); 2268 controller2: TextController = new TextController(); 2269 build() { 2270 Row() { 2271 Column({ space: 5 }) { 2272 Text(undefined, { controller: this.controller }) 2273 .copyOption(CopyOptions.InApp) 2274 .draggable(true) 2275 .fontSize(30) 2276 .onAppear(() => { 2277 this.controller.setStyledString(this.mutableStr) 2278 }) 2279 Text(undefined, { controller: this.controller2 }) 2280 .copyOption(CopyOptions.InApp) 2281 .draggable(true) 2282 .fontSize(30) 2283 Button('GetSubStyledString (0,3)').onClick(() => { 2284 this.controller2.setStyledString(this.mutableStr.subStyledString(0, 3)) 2285 }) 2286 Button('RemoveStyle (0,1,Decoration)').onClick(() => { 2287 this.mutableStr.removeStyle(0, 1, StyledStringKey.DECORATION) 2288 this.controller.setStyledString(this.mutableStr) 2289 }) 2290 Button('RemoveString (5,1)').onClick(() => { 2291 this.mutableStr.removeString(5, 1) 2292 this.controller.setStyledString(this.mutableStr) 2293 }) 2294 Button('ClearStyles').onClick(() => { 2295 this.mutableStr.clearStyles() 2296 this.controller.setStyledString(this.mutableStr) 2297 }) 2298 Button('replaceStyledString').onClick(() => { 2299 this.mutableStr.replaceStyledString(3, 1, new StyledString("abc", [{ 2300 start: 0, 2301 length: 3, 2302 styledKey: StyledStringKey.FONT, 2303 styledValue: new TextStyle({fontColor: Color.Blue}) 2304 }])) 2305 this.controller.setStyledString(this.mutableStr) 2306 }) 2307 Button('insertStyledString').onClick(() => { 2308 this.mutableStr.insertStyledString(4, new StyledString("A")) 2309 this.controller.setStyledString(this.mutableStr) 2310 }) 2311 } 2312 .width('100%') 2313 } 2314 .height('100%') 2315 } 2316} 2317``` 2318 2319 2320
