1# 属性字符串 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @hddgzw--> 5<!--Designer: @pssea--> 6<!--Tester: @jiaoaozihao--> 7<!--Adviser: @HelloCrease--> 8 9方便灵活应用文本样式的对象，可通过TextController中的[setStyledString](./ts-basic-components-text.md#setstyledstring12)方法与Text组件绑定，可通过RichEditorStyledStringController中的[setStyledString](ts-basic-components-richeditor.md#setstyledstring12)方法与RichEditor组件绑定。 10 11> **说明：** 12> 13> 从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> 属性字符串目前不支持在worker线程中使用。 16> 17> 属性字符串通过controller绑定时，需要等待布局完成后，绑定生效。当[measure](../js-apis-arkui-frameNode.md#measure12)和setStyledString同时使用，开发者需要通过[@ohos.arkui.inspector (布局回调)](../js-apis-arkui-inspector.md)判断布局完成，再绑定属性字符串。 18 19## 规则说明 20 21* 当组件样式和属性字符串中的样式冲突时，冲突部分以属性字符串设置的样式为准，未冲突部分则生效组件的样式。 22* 当属性字符串和[Text](./ts-basic-components-text.md)子组件冲突时，属性字符串优先级高，即当Text组件中绑定了属性字符串，忽略Text组件下包含[Span](./ts-basic-components-span.md)等子组件的情况。 23* 不支持@State修饰。 24* 建议将StyledString定义为成员变量，从而避免应用退后台后被销毁。 25* 不支持在[loadContent()](../arkts-apis-window-Window.md#loadcontent9)之前创建。 26 27## StyledString 28 29### constructor 30 31constructor(value: string | ImageAttachment | CustomSpan , styles?: Array\<StyleOptions>) 32 33属性字符串的构造函数。 34 35**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39**参数：** 40 41| 参数名 | 类型 | 必填 | 说明 | 42| -------- | -------- | -------- | -------- | 43| value | string \| [ImageAttachment](#imageattachment) \| [CustomSpan](#customspan) | 是 | 属性字符串文本内容。<br/>**说明：** <br/>当value值为ImageAttachment或CustomSpan时，styles参数不生效。<br/>需要设置styles时，通过[insertStyledString](#insertstyledstring)实现。 | 44| styles | Array<[StyleOptions](#styleoptions对象说明)> | 否 | 属性字符串初始化选项。<br/>**说明：** <br/>start为异常值时，按默认值0处理。<br/>当start的值合法且length为异常值时，length的值为属性字符串长度与start的值的差值。<br/>StyledStringKey与StyledStringValue不匹配时，不生效。<br/>styledKey参数无默认值。 | 45 46### 属性 47 48**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 49 50**系统能力：** SystemCapability.ArkUI.ArkUI.Full 51 52| 名称 | 类型 | 只读 | 可选 | 说明 | 53| ------ | ------ | ------ | ------ | -------------- | 54| length | number | 是 | 否 | 属性字符串字符的长度。<br/>**说明：** <br/>当属性字符串中包含图片或者CustomSpan时，其返回的长度按1计算。 | 55 56### getString 57 58getString(): string 59 60获取字符串信息。 61 62**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 63 64**系统能力：** SystemCapability.ArkUI.ArkUI.Full 65 66**返回值：** 67 68| 类型 |说明 | 69| ------- | --------------------------------- | 70| string | 属性字符串文本内容。<br/>**说明：** <br/>当属性字符串中包含图片时，其返回的结果用空格表示。 | 71 72### equals 73 74equals(other: StyledString): boolean 75 76判断两个属性字符串是否相等。 77 78**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82**参数：** 83 84| 参数名 | 类型 | 必填 | 说明 | 85| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 86| other | [StyledString](#styledstring) | 是 | StyledString类型的比较对象。 | 87 88**返回值：** 89 90| 类型 | 说明 | 91| ------- | --------------------------------- | 92| boolean | 两个属性字符串是否相等。<br/>true表示相等，false表示不相等。<br/>**说明：** <br/>当属性字符串的文本及样式均一致，视为相等。<br/>不比较GestureStyle，当属性字符串配置了不同事件，文本和其他样式相同时，亦视为相等。<br/>当比较CustomSpan时，比较的是地址，地址相等，视为相等。 | 93 94### subStyledString 95 96subStyledString(start: number, length?: number): StyledString 97 98获取属性字符串的子字符串。 99 100**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 101 102**系统能力：** SystemCapability.ArkUI.ArkUI.Full 103 104**参数：** 105 106| 参数名 | 类型 | 必填 | 说明 | 107| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 108| start | number | 是 | 子属性字符串开始位置的下标。 | 109| length | number | 否 | 子属性字符串的长度。 | 110 111**返回值：** 112 113| 类型 | 说明 | 114| ------- | --------------------------------- | 115| [StyledString](#styledstring) | 子属性字符串。<br/>**说明：** <br/>当start为合法入参时，length的默认值是被查询属性字符串对象的长度与start的值的差。<br/>当start和length越界或者必填传入undefined时，会抛出异常。| 116 117**错误码**： 118 119以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 120 121| 错误码ID | 错误信息 | 122| ------- | -------- | 123| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 124 125### getStyles 126 127getStyles(start: number , length: number , styledKey?: StyledStringKey): Array\<SpanStyle> 128 129获取指定范围属性字符串的样式集合。 130 131**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 132 133**系统能力：** SystemCapability.ArkUI.ArkUI.Full 134 135**参数：** 136 137| 参数名 | 类型 | 必填 | 说明 | 138| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 139| start | number | 是 | 指定范围属性字符串的下标。 | 140| length | number | 是 | 指定范围属性字符串的长度。 | 141| styledKey | [StyledStringKey](#styledstringkey枚举说明) | 否 | 指定范围属性字符串样式的枚举值。 | 142 143**返回值：** 144 145| 类型 | 说明 | 146| ------- | --------------------------------- | 147| Array<[SpanStyle](#spanstyle对象说明)> | 各样式对象的数组。<br/>**说明：** <br/>当指定范围属性字符串未设置任何样式，则返回空数组。<br/>当start和length越界或者必填传入undefined时，会抛出异常；<br/>当styledKey传入异常值或undefined时，会抛出异常。<br/>当styledKey为CustomSpan时，返回的是创建CustomSpan时传入的样式对象，即修改该样式对象也会影响实际的显示效果。 | 148 149**错误码**： 150 151以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 152 153| 错误码ID | 错误信息 | 154| ------- | -------- | 155| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 156 157### fromHtml 158 159static fromHtml(html: string): Promise\<StyledString> 160 161将HTML格式字符串转换成属性字符串，当前支持转换的HTML标签范围：\<p>、\<span>、\<img>、\<br>、\<strong>、\<b>、\<a>、\<i>、\<em>、\<s>、\<u>、\<del>、\<sup>、\<sub>。支持将标签中的style属性样式转换成对应的属性字符串样式。 162 163使用方法参考[示例12（fromHtml和toHtml互相转换）](#示例12fromhtml和tohtml互相转换)。 164 165| 标签名称 | 说明 | 166|-------------|----------------------------| 167| \<p\> | 段落，分隔文本段落 | 168| \<span\> | 行内文本，支持样式设置 | 169| \<img\> | 插入图片 | 170| \<strong\> | 加粗文本 | 171| \<br\><sup>20+</sup> | 换行 | 172| \<b\><sup>20+</sup> | 加粗文本 | 173| \<a\><sup>20+</sup> | 超链接 | 174| \<i\><sup>20+</sup> | 斜体文本 | 175| \<em\><sup>20+</sup> | 斜体文本 | 176| \<s\><sup>20+</sup> | 删除线（中划线） | 177| \<u\><sup>20+</sup> | 下划线 | 178| \<del\><sup>20+</sup> | 删除线（中划线） | 179| \<sup\><sup>20+</sup> | 上标文本 | 180| \<sub\><sup>20+</sup> | 下标文本 | 181 182**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 183 184**系统能力：** SystemCapability.ArkUI.ArkUI.Full 185 186**参数：** 187 188| 参数名 | 类型 | 必填 | 说明 | 189| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 190| html | string | 是 | html格式的字符串。 | 191 192**返回值：** 193 194| 类型 | 说明 | 195| ------- | --------------------------------- | 196| Promise\<[StyledString](#styledstring)> | 属性字符串。 | 197 198**错误码**： 199 200以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)和[属性字符串错误码](../errorcode-styled-string.md)。 201 202| 错误码ID | 错误信息 | 203| ------- | -------- | 204| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 205| 170001 | Convert Error. | 206 207### toHtml<sup>14+</sup> 208 209static toHtml(styledString: StyledString): string 210 211将属性字符串转换成HTML格式字符串。支持转换的属性字符串[StyledStringKey](#styledstringkey枚举说明)包括：StyledStringKey.FONT、StyledStringKey.DECORATION、StyledStringKey.LETTER_SPACING、StyledStringKey.TEXT_SHADOW、StyledStringKey.LINE_HEIGHT、StyledStringKey.IMAGE。 212 213使用方法参考[示例12（fromHtml和toHtml互相转换）](#示例12fromhtml和tohtml互相转换)。 214 215**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 216 217**系统能力：** SystemCapability.ArkUI.ArkUI.Full 218 219**参数：** 220 221| 参数名 | 类型 | 必填 | 说明 | 222| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 223| styledString | StyledString | 是 | 属性字符串。 | 224 225**返回值：** 226 227| 类型 | 说明 | 228| ------- | --------------------------------- | 229| string | HTML格式字符串。 | 230 231**错误码**： 232 233以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 234 235| 错误码ID | 错误信息 | 236| ------- | -------- | 237| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 238 239## MutableStyledString 240 241继承于[StyledString](#styledstring)类。 242 243> **以下接口异常入参处理统一说明：** 244> 245> 当start和length越界或者必填传入undefined时，会抛出异常； 246> 247> 当styledKey和styledValue传入异常值或者两者对应关系不匹配时，会抛出异常。 248> 249 250### replaceString 251 252replaceString(start: number , length: number , other: string): void 253 254替换指定范围的字符串。 255 256**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 257 258**系统能力：** SystemCapability.ArkUI.ArkUI.Full 259 260**参数：** 261 262| 参数名 | 类型 | 必填 | 说明 | 263| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 264| start | number | 是 | 指定范围的下标。 | 265| length | number | 是 | 指定范围的长度。 | 266| other | string | 是 | 替换的新文本内容。<br/>**说明：** <br/>替换的字符串使用的是start位置字符的样式。 | 267 268**错误码**： 269 270以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 271 272| 错误码ID | 错误信息 | 273| ------- | -------- | 274| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 275 276### insertString 277 278insertString(start: number , other: string): void 279 280插入字符串。 281 282**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 283 284**系统能力：** SystemCapability.ArkUI.ArkUI.Full 285 286**参数：** 287 288| 参数名 | 类型 | 必填 | 说明 | 289| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 290| start | number | 是 | 插入位置的下标。 | 291| other | string | 是 | 插入的新文本内容。<br/>**说明：** <br/>插入的字符串使用的是start-1位置字符的样式。若start-1位置字符未设置样式，则使用start位置字符样式。 | 292 293**错误码**： 294 295以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 296 297| 错误码ID | 错误信息 | 298| ------- | -------- | 299| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 300 301### removeString 302 303removeString(start: number , length: number): void 304 305移除指定范围的字符串。 306 307当属性字符串中包含图片时，同样生效。 308 309**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 310 311**系统能力：** SystemCapability.ArkUI.ArkUI.Full 312 313**参数：** 314 315| 参数名 | 类型 | 必填 | 说明 | 316| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 317| start | number | 是 | 指定范围的下标。 | 318| length | number | 是 | 指定范围的长度。 | 319 320**错误码**： 321 322以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 323 324| 错误码ID | 错误信息 | 325| ------- | -------- | 326| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 327 328### replaceStyle 329 330replaceStyle(spanStyle: SpanStyle): void 331 332替换指定范围内容为指定类型新样式。 333 334**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 335 336**系统能力：** SystemCapability.ArkUI.ArkUI.Full 337 338**参数：** 339 340| 参数名 | 类型 | 必填 | 说明 | 341| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 342| spanStyle | [SpanStyle](#spanstyle对象说明) | 是 | 样式对象。<br/>**说明：** <br/>默认清空原有样式，替换为新样式。<br/>当SpanStyle的styledKey为IMAGE或CUSTOM_SPAN时，只有当start的位置当前是image或CustomSpan且长度为1，才会生效，其余情况无效果。 | 343 344**错误码**： 345 346以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 347 348| 错误码ID | 错误信息 | 349| ------- | -------- | 350| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 351 352### setStyle 353 354setStyle(spanStyle: SpanStyle): void 355 356为指定范围内容设置指定类型新样式。 357 358**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 359 360**系统能力：** SystemCapability.ArkUI.ArkUI.Full 361 362**参数：** 363 364| 参数名 | 类型 | 必填 | 说明 | 365| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 366| spanStyle | [SpanStyle](#spanstyle对象说明) | 是 | 样式对象。<br/>**说明：** <br/>默认不清空原有样式，叠加新样式。若是已有样式，则更新。<br/>当SpanStyle的styledKey为IMAGE或CUSTOM_SPAN时，只有当start的位置当前是image或者CustomSpan且长度为1，才会生效，其余情况无效果。 | 367 368**错误码**： 369 370以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 371 372| 错误码ID | 错误信息 | 373| ------- | -------- | 374| 401 |The parameter check failed. | 375 376### removeStyle 377 378removeStyle(start: number , length: number , styledKey: StyledStringKey): void 379 380清除指定范围内容的指定类型样式。 381 382被清空样式类型对象属性使用的是对应[Text](./ts-basic-components-text.md)组件属性的设置值，若Text组件未设置值，则使用对应Text组件属性的默认值。 383 384当属性字符串中包含图片时，同样生效。 385 386**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 387 388**系统能力：** SystemCapability.ArkUI.ArkUI.Full 389 390**参数：** 391 392| 参数名 | 类型 | 必填 | 说明 | 393| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 394| start | number | 是 | 指定范围开始位置的下标。 | 395| length | number | 是 | 指定范围的长度。 | 396| styledKey | [StyledStringKey](#styledstringkey枚举说明) | 是 | 样式类型枚举值。 | 397 398**错误码**： 399 400以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 401 402| 错误码ID | 错误信息 | 403| ------- | -------- | 404| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 405 406### removeStyles 407 408removeStyles(start: number , length: number): void 409 410清除指定范围内容的所有样式。 411 412被清空样式类型对象属性使用的是对应[Text](./ts-basic-components-text.md)组件属性的设置值，若Text组件未设置值，则使用对应Text组件属性的默认值。 413 414当属性字符串中包含图片时，同样生效。 415 416**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 417 418**系统能力：** SystemCapability.ArkUI.ArkUI.Full 419 420**参数：** 421 422| 参数名 | 类型 | 必填 | 说明 | 423| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 424| start | number | 是 | 指定范围开始位置的下标。 | 425| length | number | 是 | 指定范围的长度。 | 426 427**错误码**： 428 429以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 430 431| 错误码ID | 错误信息 | 432| ------- | -------- | 433| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 434 435### clearStyles 436 437clearStyles(): void 438 439清除属性字符串对象的所有样式。 440 441被清空样式类型对象属性使用的是对应[Text](./ts-basic-components-text.md)组件属性的设置值，若Text组件未设置值，则使用对应Text组件属性的默认值。 442 443**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 444 445**系统能力：** SystemCapability.ArkUI.ArkUI.Full 446 447### replaceStyledString 448 449replaceStyledString(start: number , length: number , other: StyledString): void 450 451替换指定范围为新的属性字符串。 452 453**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 454 455**系统能力：** SystemCapability.ArkUI.ArkUI.Full 456 457**参数：** 458 459| 参数名 | 类型 | 必填 | 说明 | 460| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 461| start | number | 是 | 指定范围开始位置的下标。 | 462| length | number | 是 | 指定范围的长度。 | 463| other | [StyledString](#styledstring) | 是 | 新的属性字符串对象。 | 464 465**错误码**： 466 467以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 468 469| 错误码ID | 错误信息 | 470| ------- | -------- | 471| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 472 473### insertStyledString 474 475insertStyledString(start: number , other: StyledString): void 476 477在指定位置插入新的属性字符串。 478 479**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 480 481**系统能力：** SystemCapability.ArkUI.ArkUI.Full 482 483**参数：** 484 485| 参数名 | 类型 | 必填 | 说明 | 486| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 487| start | number | 是 | 开始插入位置的下标。 | 488| other | [StyledString](#styledstring) | 是 | 新的属性字符串对象。| 489 490**错误码**： 491 492以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 493 494| 错误码ID | 错误信息 | 495| ------- | -------- | 496| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 497 498### appendStyledString 499 500appendStyledString(other: StyledString): void 501 502在末尾位置追加新的属性字符串。 503 504**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 505 506**系统能力：** SystemCapability.ArkUI.ArkUI.Full 507 508**参数：** 509 510| 参数名 | 类型 | 必填 | 说明 | 511| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 512| other | [StyledString](#styledstring) | 是 | 新的属性字符串对象。| 513 514 515## StyledStringValue 516 517type StyledStringValue = TextStyle | DecorationStyle | BaselineOffsetStyle | LetterSpacingStyle | 518TextShadowStyle | GestureStyle | ImageAttachment | ParagraphStyle | LineHeightStyle | UrlStyle | CustomSpan | UserDataSpan | BackgroundColorStyle 519 520样式对象类型，用于设置属性字符串的样式。 521 522**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 523 524**系统能力：** SystemCapability.ArkUI.ArkUI.Full 525 526| 类型 | 说明 | 527| ------ | ---------- | 528| [TextStyle](#textstyle) | 文本字体样式。 | 529| [DecorationStyle](#decorationstyle) | 文本装饰线样式。 | 530| [BaselineOffsetStyle](#baselineoffsetstyle) | 文本基线偏移量样式。 | 531| [LetterSpacingStyle](#letterspacingstyle) | 文本字符间距样式。 | 532| [LineHeightStyle](#lineheightstyle) | 文本行高样式。 | 533| [TextShadowStyle](#textshadowstyle) | 文本阴影样式。 | 534| [GestureStyle](#gesturestyle) | 事件手势样式。 | 535| [ParagraphStyle](#paragraphstyle) | 文本段落样式。 | 536| [ImageAttachment](#imageattachment) | 图片样式。 | 537| [CustomSpan](#customspan) | 自定义绘制Span样式。 | 538| [UserDataSpan](#userdataspan) | UserDataSpan样式。 | 539| [UrlStyle](#urlstyle14) | 超链接样式。 | 540| [BackgroundColorStyle](#backgroundcolorstyle14) | 文本背景颜色样式。 | 541 542## StyleOptions对象说明 543 544**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 545 546**系统能力：** SystemCapability.ArkUI.ArkUI.Full 547 548| 名称 | 类型 | 只读 | 可选 | 说明 | 549| ------- | --------------------------------- | ---- | ---- |--------------------------------- | 550| start | number | 否 | 是 | 设置属性字符串样式的开始位置。<br/>当start的值小于0或超出字符串长度时，按0处理。 | 551| length | number | 否 | 是 | 设置属性字符串样式的长度。<br/>当length的值小于0或超出字符串长度与start的差值时，按字符串长度与start的差值处理。 | 552| styledKey | [StyledStringKey](#styledstringkey枚举说明) | 否 | 否 | 样式类型的枚举值。 | 553| styledValue | [StyledStringValue](#styledstringvalue) | 否 | 否 | 样式对象。 | 554 555## SpanStyle对象说明 556 557**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 558 559**系统能力：** SystemCapability.ArkUI.ArkUI.Full 560 561| 名称 | 类型 | 只读 | 可选 | 说明 | 562| ------- | --------------------------------- | ---- | ---- |--------------------------------- | 563| start | number | 否 | 否 | 匹配属性字符串样式的开始位置。 | 564| length | number | 否 | 否 | 匹配属性字符串样式的长度。 | 565| styledKey | [StyledStringKey](#styledstringkey枚举说明) | 否 | 否 | 样式类型的枚举值。 | 566| styledValue | [StyledStringValue](#styledstringvalue) | 否 | 否 | 样式对象。 | 567 568## TextStyle 569 570文本字体样式对象说明。 571 572**系统能力：** SystemCapability.ArkUI.ArkUI.Full 573 574### 属性 575 576**系统能力：** SystemCapability.ArkUI.ArkUI.Full 577 578 579| 名称 | 类型 | 只读 | 可选 | 说明 | 580| ----------- | ---------------------------------------- | ---- | ---- | --------------------------------------------------------------------------------------------------------------------------------- | 581| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 是 | 是 | 获取属性字符串的文本颜色。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 582| fontFamily | string | 是 | 是 | 获取属性字符串的文本字体。<br/>默认返回undefined。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 583| fontSize | number | 是 | 是 | 获取属性字符串的文本字体大小。<br/>单位：[fp](ts-pixel-units.md) <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 584| fontWeight | number | 是 | 是 | 获取属性字符串的文本字体粗细。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 585| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 是 | 是 | 获取属性字符串的文本字体样式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 586| strokeWidth<sup>20+</sup> | number | 是 | 是 | 获取属性字符串的文本描边宽度。<br/>默认返回0，单位为[vp](ts-pixel-units.md)。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 587| strokeColor<sup>20+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 是 | 是 | 获取属性字符串的文本描边颜色。<br/>默认返回字体颜色。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 588| superscript<sup>20+</sup> | [SuperscriptStyle](ts-text-common.md#superscriptstyle20枚举说明) | 是 | 是 | 获取属性字符串的文本上下角标。<br/>默认值：SuperscriptStyle.NORMAL。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 589 590`fontWeight`参数与返回值的关系如下： 591| 参数 | 返回值 | 592| ----------- | ----------- | 593| 100 | 0 | 594| 200 | 1 | 595| 300 | 2 | 596| 400 | 3 | 597| 500 | 4 | 598| 600 | 5 | 599| 700 | 6 | 600| 800 | 7 | 601| 900 | 8 | 602| FontWeight.Bold (or 'bold')| 9 | 603| FontWeight.Normal (or 'normal') | 10 | 604| FontWeight.Bolder (or 'bolder') | 11 | 605| FontWeight.Lighter (or 'lighter')| 12 | 606| FontWeight.Medium (or 'medium') | 13 | 607| FontWeight.Regular (or 'regular') | 14 | 608 609### constructor 610 611constructor(value?: TextStyleInterface) 612 613文本字体样式的构造函数。 614 615**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 616 617**系统能力：** SystemCapability.ArkUI.ArkUI.Full 618 619**参数：** 620 621| 参数名 | 类型 | 必填 | 说明 | 622| ------- | --------------------------------- | ---- | --------------------------------- | 623| value | [TextStyleInterface](#textstyleinterface对象说明) | 否 | 字体样式设置项。 | 624 625## TextStyleInterface对象说明 626 627**系统能力：** SystemCapability.ArkUI.ArkUI.Full 628 629| 名称 | 类型 | 只读 | 可选 | 说明 | 630| ----------- | ----------------------------------- | ---- | ---- |---------------------------- | 631| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 是 | 字体颜色。<br/>默认为主题色。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 632| fontFamily | [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 文本字体。<br/>默认为主题字体。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 633| fontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 是 | 字体大小。<br/>默认字体大小为16fp。<br/>如果LengthMetrics的unit值是percent，当前设置不生效，处理为16fp。<br/>单位：[fp](ts-pixel-units.md) <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 634| fontWeight | number\| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 否 | 是 | 字体粗细。<br/>number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 635| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 是 | 字体样式。<br/>默认值：FontStyle.Normal<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 636| strokeWidth<sup>20+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 是 | 文本描边宽度。如果LengthMetrics的unit值是percent，当前设置不生效，处理为0。<br/>设置值小于0时为实心字，大于0时为空心字。<br/>默认值为0。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 637| strokeColor<sup>20+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 是 | 文本描边颜色。<br/>默认值为字体颜色，设置异常值时取字体颜色。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 638| superscript<sup>20+</sup> | [SuperscriptStyle](ts-text-common.md#superscriptstyle20枚举说明) | 否 | 是 | 文本上下角标。<br/>默认值：SuperscriptStyle.NORMAL<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 639 640## GestureStyle 641 642事件手势对象说明。 643 644**系统能力：** SystemCapability.ArkUI.ArkUI.Full 645 646### constructor 647 648constructor(value?: GestureStyleInterface) 649 650事件手势的构造函数。 651 652**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 653 654**系统能力：** SystemCapability.ArkUI.ArkUI.Full 655 656**参数：** 657 658| 参数名 | 类型 | 必填 | 说明 | 659| ------- | --------------------------------- | ---- | --------------------------------- | 660| value | [GestureStyleInterface](#gesturestyleinterface对象说明) | 否 | 事件设置项。 | 661 662## GestureStyleInterface对象说明 663 664**系统能力：** SystemCapability.ArkUI.ArkUI.Full 665 666| 名称 | 类型 | 只读 | 可选 | 说明 | 667| ------- | --------------------------------- | ---- | ---- | --------------------------------- | 668| onClick | Callback\<[ClickEvent](ts-universal-events-click.md#clickevent对象说明)> | 否 | 是 | 设置点击事件。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 669| onLongPress | Callback\<[GestureEvent](./ts-gesture-common.md#gestureevent对象说明)> | 否 | 是 | 设置长按事件。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 670| onTouch<sup>20+</sup> | Callback\<[TouchEvent](ts-universal-events-touch.md#touchevent对象说明)> | 否 | 是 | 设置触摸事件。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。| 671 672## DecorationOptions<sup>20+</sup> 673 674文本装饰线样式的额外配置选项对象说明。 675 676**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 677 678**系统能力：** SystemCapability.ArkUI.ArkUI.Full 679 680| 名称 | 类型 | 只读 | 可选 | 说明 | 681| ------- | --------------------------------- | ---- | ---- |--------------------------------- | 682| enableMultiType | boolean | 否 | 是 | 是否开启多装饰线显示。<br/>默认值：undefined。设置为true开启，设置为false/undefined关闭。<br/>所有需要显示的装饰线都必须启用此选项，在这些装饰线的交集区域显示多装饰线效果，样式、颜色和粗细将采用最后设置的装饰线的效果。 | 683 684## DecorationStyle 685 686文本装饰线样式对象说明。 687 688**系统能力：** SystemCapability.ArkUI.ArkUI.Full 689 690### 属性 691 692**系统能力：** SystemCapability.ArkUI.ArkUI.Full 693 694| 名称 | 类型 | 只读 |可选 | 说明 | 695| ------------ |---------------------| ---- | ---- | ------ | 696| type | [TextDecorationType](ts-appendix-enums.md#textdecorationtype) | 是 | 否 | 获取属性字符串的文本装饰线类型。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 697| color | [ResourceColor](ts-types.md#resourcecolor) | 是 | 是 | 获取属性字符串的文本装饰线颜色。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 698| style | [TextDecorationStyle](ts-appendix-enums.md#textdecorationstyle12) | 是 |是 | 获取属性字符串的文本装饰线样式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 699| thicknessScale<sup>20+</sup> | number | 是 |是 | 获取属性字符串的文本装饰线粗细缩放值。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 700| options<sup>20+</sup> | [DecorationOptions](#decorationoptions20) | 是 |是 | 获取属性字符串的文本装饰线样式的额外配置选项。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 701 702### constructor 703 704constructor(value: DecorationStyleInterface) 705 706文本装饰线样式的构造函数。 707 708**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 709 710**系统能力：** SystemCapability.ArkUI.ArkUI.Full 711 712**参数：** 713 714| 参数名 | 类型 | 必填 | 说明 | 715| ------- | --------------------------------- | ---- | --------------------------------- | 716| value | [DecorationStyleInterface](#decorationstyleinterface) | 是 | 文本装饰线设置项。<br/>默认值：<br/>{<br/> type: TextDecorationType.None,<br/> color: Color.Black,<br/> style: TextDecorationStyle.SOLID <br/>} | 717 718### constructor<sup>20+</sup> 719 720constructor(value: DecorationStyleInterface, options?: DecorationOptions) 721 722文本装饰线样式的构造函数，包含额外配置选项。 723 724**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 725 726**系统能力：** SystemCapability.ArkUI.ArkUI.Full 727 728**参数：** 729 730| 参数名 | 类型 | 必填 | 说明 | 731| ------- | --------------------------------- | ---- | --------------------------------- | 732| value | [DecorationStyleInterface](#decorationstyleinterface) | 是 | 文本装饰线设置项。<br/>默认值：<br/>{<br/> type: TextDecorationType.None,<br/> color: Color.Black,<br/> style: TextDecorationStyle.SOLID, <br/> thicknessScale: 1.0<br/>} | 733| options | [DecorationOptions](#decorationoptions20) | 否 | 文本装饰线额外配置选项。<br/>默认值：<br/>{<br/> enableMultiType: undefined<br/>} | 734 735## DecorationStyleInterface 736 737文本装饰线样式接口对象说明。 738 739**系统能力：** SystemCapability.ArkUI.ArkUI.Full 740 741| 名称 | 类型 | 只读 | 可选 | 说明 | 742| ------- | --------------------------------- | ---- | ---- |--------------------------------- | 743| type | [TextDecorationType](ts-appendix-enums.md#textdecorationtype) | 否 | 否 | 装饰线类型。<br/>默认值：TextDecorationType.None <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 744| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 是 | 装饰线颜色。<br/>默认值：Color.Black <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 745| style | [TextDecorationStyle](ts-appendix-enums.md#textdecorationstyle12) | 否 | 是 | 装饰线样式。<br/>默认值：TextDecorationStyle.SOLID <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 746| thicknessScale<sup>20+</sup> | number | 否 | 是 | 装饰线粗细缩放。<br/>默认值：1.0 <br/>取值范围：[0, +∞) <br/>**说明：** 负值按默认值处理。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 747 748## BaselineOffsetStyle 749 750文本基线偏移量对象说明。 751 752**系统能力：** SystemCapability.ArkUI.ArkUI.Full 753 754### 属性 755 756**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 757 758**系统能力：** SystemCapability.ArkUI.ArkUI.Full 759 760| 名称 | 类型 | 只读 | 可选 | 说明 | 761| ------------ |---------------------| ---- | ---- | ------ | 762| baselineOffset | number | 是 | 否 | 获取属性字符串的文本基线偏移量。<br/>单位：[vp](ts-pixel-units.md) | 763 764### constructor 765 766constructor(value: LengthMetrics) 767 768文本基线偏移的构造函数。 769 770**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 771 772**系统能力：** SystemCapability.ArkUI.ArkUI.Full 773 774**参数：** 775 776| 参数名 | 类型 | 必填 | 说明 | 777| ------- | --------------------------------- | ---- | --------------------------------- | 778| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是 | 文本基线偏移量设置项。如果LengthMetrics的unit值是percent，该设置不生效。 | 779 780## LetterSpacingStyle 781 782文本字符间距对象说明。 783 784**系统能力：** SystemCapability.ArkUI.ArkUI.Full 785 786### 属性 787 788**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 789 790**系统能力：** SystemCapability.ArkUI.ArkUI.Full 791 792| 名称 | 类型 | 只读 | 可选 | 说明 | 793| ------------ |---------------------| ---- | ---- | ------ | 794| letterSpacing | number | 是 | 否 | 获取属性字符串的文本字符间距。<br/>单位：[vp](ts-pixel-units.md) | 795 796### constructor 797 798constructor(value: LengthMetrics) 799 800文本字符间距的构造函数。 801 802**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 803 804**系统能力：** SystemCapability.ArkUI.ArkUI.Full 805 806**参数：** 807 808| 参数名 | 类型 | 必填 | 说明 | 809| ------- | --------------------------------- | ---- | --------------------------------- | 810| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是 | 文本字符间距设置项。如果LengthMetrics的unit值是percent，该设置不生效。 | 811 812## LineHeightStyle 813 814文本行高对象说明。 815 816**系统能力：** SystemCapability.ArkUI.ArkUI.Full 817 818### 属性 819 820**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 821 822**系统能力：** SystemCapability.ArkUI.ArkUI.Full 823 824| 名称 | 类型 | 只读 | 可选 | 说明 | 825| ------------ |---------------------| ---- | ---- | ------ | 826| lineHeight | number | 是 | 否 | 获取属性字符串的文本行高。<br/>单位：[vp](ts-pixel-units.md) | 827 828### constructor 829 830constructor(lineHeight: LengthMetrics) 831 832文本行高的构造函数。 833 834**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 835 836**系统能力：** SystemCapability.ArkUI.ArkUI.Full 837 838**参数：** 839 840| 参数名 | 类型 | 必填 | 说明 | 841| ------- | --------------------------------- | ---- | --------------------------------- | 842| lineHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是 | 文本行高设置项。如果LengthMetrics的value值不大于0时，不限制文本行高，自适应字体大小。 | 843 844## TextShadowStyle 845 846文本阴影对象说明。 847 848**系统能力：** SystemCapability.ArkUI.ArkUI.Full 849 850### 属性 851 852**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 853 854**系统能力：** SystemCapability.ArkUI.ArkUI.Full 855 856| 名称 | 类型 | 只读 | 可选 | 说明 | 857| ------------ |---------------------| ---- | ---- | ------ | 858| textShadow | Array\<[ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明)> | 是 | 否 | 获取属性字符串的文本阴影。 | 859 860### constructor 861 862constructor(value: ShadowOptions | Array\<ShadowOptions>) 863 864文本阴影对象的构造函数。 865 866ShadowOptions对象中不支持fill字段。 867 868**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 869 870**系统能力：** SystemCapability.ArkUI.ArkUI.Full 871 872**参数：** 873 874| 参数名 | 类型 | 必填 | 说明 | 875| ------- | --------------------------------- | ---- | --------------------------------- | 876| value | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明) \| Array\<[ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明)> | 是 | 文本阴影设置项。 | 877 878## ImageAttachment 879 880图片对象说明。 881 882**系统能力：** SystemCapability.ArkUI.ArkUI.Full 883 884### 属性 885 886**系统能力：** SystemCapability.ArkUI.ArkUI.Full 887 888| 名称 | 类型 | 只读 | 可选 | 说明 | 889| ------------ |---------------------| ---- | ---- | ------ | 890| value | [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 否 | 获取属性字符串的图片数据源。**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 891| size | [SizeOptions](ts-types.md#sizeoptions) | 是 | 是 | 获取属性字符串的图片尺寸。**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。<br/>返回number类型值的单位为`px`。 | 892| verticalAlign | [ImageSpanAlignment](ts-appendix-enums.md#imagespanalignment10) | 是 | 是 | 获取属性字符串的图片对齐方式。**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 893| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 是 | 是 | 获取属性字符串的图片缩放类型。**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 894| layoutStyle | [ImageAttachmentLayoutStyle](#imageattachmentlayoutstyle对象说明) | 是 | 是 | 获取属性字符串的图片布局。**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 895| colorFilter<sup>15+</sup> | [ColorFilterType](#colorfiltertype15) | 是 | 是 | 获取属性字符串的图片颜色滤镜效果。**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 896 897### constructor 898 899constructor(value: ImageAttachmentInterface) 900 901图片对象的构造函数。 902 903**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 904 905**系统能力：** SystemCapability.ArkUI.ArkUI.Full 906 907**参数：** 908 909| 参数名 | 类型 | 必填 | 说明 | 910| ------- | --------------------------------- | ---- | --------------------------------- | 911| value | [ImageAttachmentInterface](#imageattachmentinterface对象说明) | 是 | 图片设置项。 | 912 913### constructor<sup>15+</sup> 914 915constructor(attachment: Optional\<AttachmentType\>) 916 917图片对象的构造函数。与value类型入参构造函数相比，attachment参数增加了对undefined类型和[ResourceStr](ts-types.md#resourcestr)类型图片的支持。 918 919**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 920 921**系统能力：** SystemCapability.ArkUI.ArkUI.Full 922 923**参数：** 924 925| 参数名 | 类型 | 必填 | 说明 | 926| ------- | --------------------------------- | ---- | --------------------------------- | 927| attachment | Optional<[AttachmentType](#attachmenttype15)> | 是 | PixelMap类型或[ResourceStr](ts-types.md#resourcestr)类型图片设置项。 | 928 929## AttachmentType<sup>15+</sup> 930 931type AttachmentType = ImageAttachmentInterface | ResourceImageAttachmentOptions 932 933图片设置项类型，用于设置属性字符串PixelMap类型或[ResourceStr](ts-types.md#resourcestr)类型图片。 934 935**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 936 937**系统能力：** SystemCapability.ArkUI.ArkUI.Full 938 939| 类型 | 说明 | 940| ------ | ---------- | 941| [ImageAttachmentInterface](#imageattachmentinterface对象说明) | PixelMap类型图片设置项。| 942| [ResourceImageAttachmentOptions](#resourceimageattachmentoptions15) | ResourceStr类型图片设置项。 | 943 944## ColorFilterType<sup>15+</sup> 945 946type ColorFilterType = ColorFilter | DrawingColorFilter 947 948图片颜色滤镜设置项类型。 949 950**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 951 952**系统能力：** SystemCapability.ArkUI.ArkUI.Full 953 954| 类型 | 说明 | 955| ------ | ---------- | 956| [ColorFilter](ts-types.md#colorfilter9) | ColorFilter类型图片颜色滤镜设置项。 | 957| [DrawingColorFilter](../../apis-arkgraphics2d/arkts-apis-graphics-drawing-ColorFilter.md) | DrawingColorFilter类型图片颜色滤镜设置项。 | 958 959## ImageAttachmentInterface对象说明 960 961**系统能力：** SystemCapability.ArkUI.ArkUI.Full 962 963| 名称 | 类型 | 只读 | 可选 | 说明 | 964| ------- | --------------------------------- | ---- | ---- | --------------------------------- | 965| value | [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 否 | 否 | 设置图片数据源。**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 966| size | [SizeOptions](ts-types.md#sizeoptions) | 否 | 是 | 设置图片大小，不支持百分比。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。<br/>size的默认值与objectFit的值有关，不同的objectFit的值对应size的默认值不同。比如当objectFit的值为Cover时，图片高度为组件高度减去组件上下的内边距，图片宽度为组件宽度减去组件左右的内边距。 | 967| verticalAlign | [ImageSpanAlignment](ts-appendix-enums.md#imagespanalignment10) | 否 | 是 | 设置图片基于文本的对齐方式。**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。<br/>默认值：ImageSpanAlignment.BOTTOM | 968| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 否 | 是 | 设置图片的缩放类型，当前枚举类型不支持ImageFit.MATRIX。**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。<br/>默认值：ImageFit.Cover | 969| layoutStyle | [ImageAttachmentLayoutStyle](#imageattachmentlayoutstyle对象说明) | 否 | 是 | 设置图片布局。**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 970| colorFilter<sup>15+</sup> | [ColorFilterType](#colorfiltertype15) | 否 | 是 | 设置属性字符串的图片颜色滤镜效果。**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 971 972## ImageAttachmentLayoutStyle对象说明 973 974**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 975 976**系统能力：** SystemCapability.ArkUI.ArkUI.Full 977 978| 名称 | 类型 | 只读 | 可选 | 说明 | 979| ------- | --------------------------------- | ---- | ---- | --------------------------------- | 980| margin | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [Margin](ts-types.md#margin) | 否 | 是 | 设置图片外边距。<br/>默认值：0<br/>单位：[vp](ts-pixel-units.md) | 981| padding | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [Padding](ts-types.md#padding) | 否 | 是 | 设置图片内边距。<br/>默认值：0<br/>单位：[vp](ts-pixel-units.md) | 982| borderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [BorderRadiuses](ts-types.md#borderradiuses9) | 否 | 是 | 设置圆角。<br/>默认值：0<br/>单位：[vp](ts-pixel-units.md) | 983 984## ResourceImageAttachmentOptions<sup>15+</sup> 985 986ResourceStr类型图片设置项。 987 988**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 989 990**系统能力：** SystemCapability.ArkUI.ArkUI.Full 991 992| 名称 | 类型 | 只读 | 可选 | 说明 | 993| ------- | --------------------------------- | ---- | ---- |--------------------------------- | 994| resourceValue | Optional<[ResourceStr](ts-types.md#resourcestr)> | 否 | 否 | 设置图片数据源。 | 995| size | [SizeOptions](ts-types.md#sizeoptions) | 否 | 是 | 设置图片大小。 | 996| verticalAlign | [ImageSpanAlignment](ts-appendix-enums.md#imagespanalignment10) | 否 | 是 | 设置图片基于文本的对齐方式。<br/>默认值：ImageSpanAlignment.BOTTOM | 997| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 否 | 是 | 设置图片的缩放类型，当前枚举类型不支持ImageFit.MATRIX。<br/>默认值：ImageFit.Cover | 998| layoutStyle | [ImageAttachmentLayoutStyle](#imageattachmentlayoutstyle对象说明) | 否 | 是 | 设置图片布局。 | 999| colorFilter | [ColorFilterType](#colorfiltertype15) | 否 | 是 | 设置属性字符串的图片颜色滤镜效果。 | 1000| syncLoad | boolean | 否 | 是 | 是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。<br/>默认值：false | 1001 1002## CustomSpan 1003 1004自定义绘制Span，仅提供基类，具体实现由开发者定义。 1005 1006自定义绘制Span拖拽显示的缩略图为空白。 1007 1008**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1009 1010### onMeasure 1011 1012abstract onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics 1013 1014获取自定义绘制Span的尺寸大小。 1015 1016**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1017 1018**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1019 1020**参数：** 1021 1022| 参数名 | 类型 | 必填 | 说明 | 1023| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 1024| measureInfo | [CustomSpanMeasureInfo](#customspanmeasureinfo对象说明) | 是 | 文本的字体大小。 | 1025 1026**返回值：** 1027 1028| 类型 | 说明 | 1029| ------- | --------------------------------- | 1030| [CustomSpanMetrics](#customspanmetrics对象说明) | 自定义绘制Span的尺寸信息。<br/>**说明：** <br/>最终的CustomSpan的高度是由当前Text组件的行高所决定的。当height不传值，则默认取Text组件的fontSize的值作为CustomSpan的高度；当height大于当前行的其他子组件的高度时，此时height即为Text组件的行高。 | 1031 1032### onDraw 1033 1034abstract onDraw(context: DrawContext, drawInfo: CustomSpanDrawInfo): void 1035 1036绘制自定义绘制Span。 1037 1038**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1039 1040**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1041 1042**参数：** 1043 1044| 参数名 | 类型 | 必填 | 说明 | 1045| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 1046| context | [DrawContext](../js-apis-arkui-graphics.md#drawcontext) | 是 | 图形绘制上下文。<br/>**说明：** <br/>DrawContext的canvas方法获取的画布是Text组件的画布，绘制时不会超出Text组件的范围。 | 1047| drawInfo | [CustomSpanDrawInfo](#customspandrawinfo对象说明) | 是 | 自定义绘制Span的绘制信息。 | 1048 1049### invalidate<sup>13+</sup> 1050 1051invalidate(): void 1052 1053主动刷新使用CustomSpan的Text组件。 1054 1055**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 1056 1057**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1058 1059## CustomSpanMeasureInfo对象说明 1060 1061**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1062 1063**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1064 1065| 名称 | 类型 | 只读 | 可选 | 说明 | 1066| ------- | --------------------------------- | ---- | ---- |--------------------------------- | 1067| fontSize | number | 否 | 否 | 设置文本字体大小。<br/>单位：[fp](ts-pixel-units.md) | 1068 1069## CustomSpanMetrics对象说明 1070 1071**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1072 1073**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1074 1075| 名称 | 类型 | 只读 | 可选 | 说明 | 1076| ------- | --------------------------------- | ---- | ---- |--------------------------------- | 1077| width | number | 否 | 否 | 自定义绘制Span的宽。<br/>单位：[vp](ts-pixel-units.md) | 1078| height | number | 否 | 是 | 自定义绘制Span的高。<br/>单位：[vp](ts-pixel-units.md) | 1079 1080## CustomSpanDrawInfo对象说明 1081 1082**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1083 1084**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1085 1086| 名称 | 类型 | 只读 | 可选 | 说明 | 1087| ------- | --------------------------------- | ---- | ---- |--------------------------------- | 1088| x | number | 否 | 否 | 自定义绘制Span相对于挂载组件的偏移。<br/>单位：[px](ts-pixel-units.md) | 1089| lineTop | number | 否 | 否 | 自定义绘制Span相对于Text组件的上边距。<br/>单位：[px](ts-pixel-units.md) | 1090| lineBottom | number | 否 | 否 | 自定义绘制Span相对于Text组件的下边距。<br/>单位：[px](ts-pixel-units.md) | 1091| baseline | number | 否 | 否 | 自定义绘制Span的所在行的基线偏移量。<br/>单位：[px](ts-pixel-units.md) | 1092 1093## ParagraphStyle 1094 1095文本段落样式对象说明。 1096 1097除首个段落外，后续段落按'\n'划分。 1098 1099每个段落的段落样式按首个占位设置的段落样式生效，未设置时，段落按被绑定组件的段落样式生效。 1100 1101**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1102 1103### 属性 1104 1105**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1106 1107| 名称 | 类型 | 只读 | 可选 | 说明 | 1108| ------------ |---------------------| ---- | ---- | ------ | 1109| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 是 | 是 | 获取属性字符串文本段落在水平方向的对齐方式。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1110| textIndent | number | 是 | 是 | 获取属性字符串文本段落的首行文本缩进。单位VP <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1111| maxLines | number | 是 | 是 | 获取属性字符串文本段落的最大行数。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1112| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | 是 | 是 | 获取属性字符串文本段落超长时的显示方式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1113| wordBreak | [WordBreak](ts-appendix-enums.md#wordbreak11) | 是 | 是 | 获取属性字符串文本段落的断行规则。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1114| leadingMargin | number \| [LeadingMarginPlaceholder](ts-basic-components-richeditor.md#leadingmarginplaceholder11) | 是 | 是 | 获取属性字符串文本段落的缩进。<br/>返回为number类型时，单位为vp。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1115| paragraphSpacing<sup>19+</sup> | number | 是 | 是 | 获取属性字符串文本段落的段落间距。<br/>单位：vp<br/>**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 | 1116| textVerticalAlign<sup>20+</sup> | [TextVerticalAlign](ts-text-common.md#textverticalalign20) | 是 | 是 | 获取属性字符串文本段落在垂直方向的对齐方式。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 1117 1118> **说明：** 1119> 1120> 属性字符串的maxLines和overflow仅在Text中生效，建议在组件侧设置。 1121> 1122> textAlign只能调整文本整体的布局，不影响字符的显示顺序。若需要调整字符的显示顺序，请参考[镜像状态字符对齐](../../../ui/arkts-internationalization.md#镜像状态字符对齐)。 1123 1124### constructor 1125 1126constructor(value?: ParagraphStyleInterface) 1127 1128文本段落样式的构造函数。 1129 1130**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1131 1132**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1133 1134**参数：** 1135 1136| 参数名 | 类型 | 必填 | 说明 | 1137| ------- | --------------------------------- | ---- | --------------------------------- | 1138| value | [ParagraphStyleInterface](#paragraphstyleinterface对象说明) | 否 | 段落样式设置项。 | 1139 1140## ParagraphStyleInterface对象说明 1141 1142**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1143 1144| 名称 | 类型 | 只读 | 可选 | 说明 | 1145| ------- | --------------------------------- | ---- | ---- | --------------------------------- | 1146| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 否 | 是 | 设置文本段落在水平方向的对齐方式。<br/>默认值：TextAlign.Start<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1147| textIndent | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 是 | 设置文本段落的首行文本缩进。不支持百分比。<br/>默认值：0<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1148| maxLines | number | 否 | 是 | 设置文本段落的最大行数，默认不限制。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1149| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | 否 | 是 | 设置文本段落超长时的显示方式。<br/>默认值：TextOverflow.None<br />需配合maxLines使用，单独设置不生效。不支持TextOverflow.MARQUEE。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1150| wordBreak | [WordBreak](ts-appendix-enums.md#wordbreak11) | 否 | 是 | 设置文本段落的断行规则。<br/>默认值：WordBreak.NORMAL<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1151| leadingMargin | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [LeadingMarginPlaceholder](ts-basic-components-richeditor.md#leadingmarginplaceholder11) | 否 | 是 | 设置文本段落的缩进。不支持百分比。<br/>默认值：0<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1152| paragraphSpacing<sup>19+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 是 | 设置文本段落的段落间距。<br/>段落间距默认大小为0。不支持百分比。<br/>**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 | 1153| textVerticalAlign<sup>20+</sup> | [TextVerticalAlign](ts-text-common.md#textverticalalign20) | 否 | 是 | 设置文本段落在垂直方向的对齐方式。<br/>默认值：TextVerticalAlign.BASELINE<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 1154 1155## UserDataSpan 1156 1157支持存储自定义扩展信息，用于存储和获取用户数据，仅提供基类，具体实现由开发者定义。 1158 1159扩展信息不影响实际显示效果。 1160 1161**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1162 1163**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1164 1165## StyledStringKey枚举说明 1166 1167**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1168 1169| 名称 | 值 | 说明 | 1170| ------ | --- | ----------------------------- | 1171| FONT | 0 | 字体样式键。[TextStyle](./ts-universal-styled-string.md#textstyle)所属键。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1172| DECORATION | 1 | 文本装饰线样式键。[DecorationStyle](./ts-universal-styled-string.md#decorationstyle)所属键。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1173| BASELINE_OFFSET | 2 | 文本基线偏移量样式键。[BaselineOffsetStyle](./ts-universal-styled-string.md#baselineoffsetstyle)所属键。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1174| LETTER_SPACING | 3 | 文本字符间距样式键。[LetterSpacingStyle](./ts-universal-styled-string.md#letterspacingstyle)所属键。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1175| TEXT_SHADOW | 4 | 文本阴影样式键。[TextShadowStyle](./ts-universal-styled-string.md#textshadowstyle)所属键。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1176| LINE_HEIGHT | 5 | 文本行高样式键。[LineHeightStyle](./ts-universal-styled-string.md#lineheightstyle)所属键。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1177| BACKGROUND_COLOR<sup>14+</sup> | 6 | 文本背景色样式键。[BackgroundColorStyle](./ts-universal-styled-string.md#backgroundcolorstyle14)所属键。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 1178| URL<sup>14+</sup> | 7 | 超链接样式键。[UrlStyle](./ts-universal-styled-string.md#urlstyle14)所属键。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 1179| GESTURE | 100 | 事件手势键。[GestureStyle](./ts-universal-styled-string.md#gesturestyle)所属键。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1180| PARAGRAPH_STYLE | 200 | 段落样式键。[ParagraphStyle](./ts-universal-styled-string.md#paragraphstyle)所属键。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1181| IMAGE | 300 | 图片键。[ImageAttachment](./ts-universal-styled-string.md#imageattachment)所属键。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1182| CUSTOM_SPAN | 400 | 自定义绘制Span键。[CustomSpan](./ts-universal-styled-string.md#customspan)所属键。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1183| USER_DATA | 500 | UserDataSpan键。[UserDataSpan](./ts-universal-styled-string.md#userdataspan)所属键。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1184 1185## BackgroundColorStyle<sup>14+</sup> 1186 1187文本背景颜色对象说明。 1188 1189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1190 1191### 属性 1192 1193**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 1194 1195**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1196 1197| 名称 | 类型 | 只读 | 可选 | 说明 | 1198| ------------ |---------------------| ---- | ---- | ------ | 1199| textBackgroundStyle | [TextBackgroundStyle](ts-basic-components-span.md#textbackgroundstyle11对象说明) | 是 | 否 | 获取属性字符串的文本背景颜色。<br />默认值：<br />{<br /> color: Color.Transparent,<br /> radius: 0<br />} | 1200 1201### constructor<sup>14+</sup> 1202 1203constructor(textBackgroundStyle: TextBackgroundStyle) 1204 1205文本背景颜色的构造函数。 1206 1207**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 1208 1209**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1210 1211**参数：** 1212 1213| 参数名 | 类型 | 必填 | 说明 | 1214| ------- | --------------------------------- | ---- | --------------------------------- | 1215| textBackgroundStyle | [TextBackgroundStyle](ts-basic-components-span.md#textbackgroundstyle11对象说明) | 是 | 文本背景色设置项。<br />默认值：<br />{<br /> color: Color.Transparent,<br /> radius: 0<br />} | 1216 1217## UrlStyle<sup>14+</sup> 1218 1219超链接对象说明。 1220 1221默认颜色、字号、字重分别是'#ff0a59f7'、'16fp'、'FontWeight.Regular'，若属性字符串设置TextStyle，则TextStyle优先级更高。 1222 1223**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1224 1225### 属性 1226 1227**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 1228 1229**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1230 1231| 名称 | 类型 | 只读 | 可选 | 说明 | 1232| ------------ |---------------------| ---- | ---- | ------ | 1233| url | string | 是 | 否 | 获取属性字符串的超链接内容。 | 1234 1235### constructor<sup>14+</sup> 1236 1237constructor(url: string) 1238 1239超链接对象的构造函数。 1240 1241**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 1242 1243**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1244 1245**参数：** 1246 1247| 参数名 | 类型 | 必填 | 说明 | 1248| ------- | --------------------------------- | ---- | --------------------------------- | 1249| url | string | 是 | 超链接设置项。| 1250 1251## 示例 1252 1253### 示例1（属性字符串处理） 1254 1255从API version 12开始，该示例通过[insertString](#insertstring)、[removeStyles](#removestyles)、[replaceStyle](#replacestyle)、[getStyles](#getstyles)接口实现属性字符串的插入、删除、替换、查看。 1256 1257```ts 1258// xxx.ets 1259@Entry 1260@Component 1261struct styled_string_process_demo { 1262 @State height1: number = 450; 1263 @State fontSize1: number = 16; 1264 @State fontWeight1: number = 400; 1265 @State color1: Color = Color.Blue; 1266 scroll: Scroller = new Scroller(); 1267 fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Blue }); 1268 fontStyleAttr2: TextStyle = new TextStyle({ fontColor: Color.Orange }); 1269 // 创建可读写属性字符串的对象mutableStyledString1 1270 mutableStyledString1: MutableStyledString = new MutableStyledString("运动45分钟"); 1271 // 创建构造入参有字符串和样式的对象mutableStyledString2 1272 mutableStyledString2: MutableStyledString = new MutableStyledString("test hello world", [{ 1273 start: 0, 1274 length: 5, 1275 styledKey: StyledStringKey.FONT, 1276 styledValue: this.fontStyleAttr1 1277 }]); 1278 // 创建只读属性字符串对象styledString2 1279 styledString2: StyledString = new StyledString("运动45分钟"); 1280 spanStyle1: SpanStyle = { 1281 start: 0, 1282 length: 5, 1283 styledKey: StyledStringKey.FONT, 1284 styledValue: new TextStyle({ fontColor: Color.Pink }) 1285 }; 1286 spanStyle2: SpanStyle = { 1287 start: 0, 1288 length: 2, 1289 styledKey: StyledStringKey.FONT, 1290 styledValue: new TextStyle({ fontColor: Color.Red }) 1291 }; 1292 @State string1: string = ''; 1293 @State fontColor1: ResourceColor = Color.Red; 1294 controller1: TextController = new TextController(); 1295 controller2: TextController = new TextController(); 1296 controller3: TextController = new TextController(); 1297 1298 async onPageShow() { 1299 this.controller1.setStyledString(this.styledString2); 1300 this.controller2.setStyledString(this.mutableStyledString1); 1301 this.controller3.setStyledString(this.mutableStyledString2); 1302 } 1303 1304 build() { 1305 Column() { 1306 Scroll(this.scroll) { 1307 Column() { 1308 // 显示属性字符串 1309 Text(undefined, { controller: this.controller1 }) 1310 Text(undefined, { controller: this.controller3 }).key('mutableStyledString2') 1311 Button('修改string1的值') 1312 .onClick(() => { 1313 let result = this.mutableStyledString1.equals(this.styledString2); 1314 if (result) { 1315 this.string1 = this.mutableStyledString1.getString(); 1316 console.info("mutableStyledString1 content:", this.mutableStyledString1.getString()); 1317 console.info("mutableStyledString1 length:", this.mutableStyledString1.length); 1318 } 1319 }) 1320 1321 // 属性字符串与Span冲突时忽略Span,以及样式与Text组件属性未冲突部分生效Text设置的属性 1322 Text(undefined, { controller: this.controller2 }) { 1323 Span("span and styledString test") 1324 .fontColor(Color.Yellow) 1325 .decoration({ type: TextDecorationType.LineThrough }) 1326 // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。 1327 ImageSpan($r('app.media.startIcon')) 1328 } 1329 .key('styledString2') 1330 .fontColor(this.fontColor1) 1331 .letterSpacing(10) 1332 .fontSize(32) 1333 .fontWeight(600) 1334 .fontStyle(FontStyle.Italic) 1335 .lineHeight(30) 1336 .textShadow({ 1337 radius: 5, 1338 color: Color.Blue, 1339 offsetX: 5, 1340 offsetY: 5 1341 }) 1342 .textCase(TextCase.UpperCase) 1343 .decoration({ type: TextDecorationType.LineThrough, color: Color.Yellow }) 1344 .baselineOffset(2) 1345 .copyOption(CopyOptions.InApp) 1346 .margin({ top: 10 }) 1347 .draggable(true) 1348 1349 // 以上冲突测试对照组 1350 Text() { 1351 Span(this.string1) 1352 .fontColor(this.color1) 1353 .decoration({ type: TextDecorationType.LineThrough }) 1354 // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。 1355 ImageSpan($r('app.media.startIcon')) 1356 .width(50).height(50) 1357 } 1358 .letterSpacing(10) 1359 .fontSize(32) 1360 .fontWeight(600) 1361 .fontStyle(FontStyle.Italic) 1362 .lineHeight(30) 1363 .textShadow({ 1364 radius: 5, 1365 color: Color.Blue, 1366 offsetX: 5, 1367 offsetY: 5 1368 }) 1369 .textCase(TextCase.UpperCase) 1370 .decoration({ type: TextDecorationType.LineThrough, color: Color.Yellow }) 1371 .baselineOffset(2) 1372 1373 Button('设置样式及替换文本') 1374 .onClick(() => { 1375 this.mutableStyledString1.replaceStyle({ 1376 start: 2, 1377 length: 2, 1378 styledKey: StyledStringKey.FONT, 1379 styledValue: this.fontStyleAttr1 1380 }); 1381 this.mutableStyledString1.insertString(0, "压力85偏高，"); 1382 this.mutableStyledString1.setStyle({ 1383 start: 2, 1384 length: 2, 1385 styledKey: StyledStringKey.FONT, 1386 styledValue: this.fontStyleAttr2 1387 }); 1388 this.controller2.setStyledString(this.mutableStyledString1); 1389 }) 1390 .margin({ top: 10 }) 1391 1392 Button('查询样式及清空样式') 1393 .onClick(() => { 1394 let styles = this.mutableStyledString1.getStyles(0, this.mutableStyledString1.length); 1395 if (styles.length == 2) { 1396 for (let i = 0; i < styles.length; i++) { 1397 console.info('StyledString style object start:' + styles[i].start); 1398 console.info('StyledString style object length:' + styles[i].length); 1399 console.info('StyledString style object key:' + styles[i].styledKey); 1400 if (styles[i].styledKey === 0) { 1401 let fontAttr = styles[i].styledValue as TextStyle; 1402 console.info('StyledString fontColor:' + fontAttr.fontColor); 1403 } 1404 } 1405 } 1406 if (styles[0] !== undefined) { 1407 this.mutableStyledString2.setStyle(styles[0]); 1408 this.controller3.setStyledString(this.mutableStyledString2); 1409 } 1410 this.mutableStyledString1.removeStyles(2, 3); 1411 this.controller2.setStyledString(this.mutableStyledString1); 1412 }) 1413 .margin({ top: 10 }) 1414 }.width('100%') 1415 1416 } 1417 .expandSafeArea([SafeAreaType.KEYBOARD]) 1418 .scrollable(ScrollDirection.Vertical) 1419 .scrollBar(BarState.On) 1420 .scrollBarColor(Color.Gray) 1421 .scrollBarWidth(10) 1422 .edgeEffect(EdgeEffect.None) 1423 } 1424 .width('100%') 1425 } 1426} 1427``` 1428 1429 1430 1431### 示例2（设置事件） 1432 1433从API version 12开始，该示例通过[StyleOptions](#styleoptions对象说明)中的styledKey、styledValue接口实现属性字符串绑定事件。 1434 1435```ts 1436// xxx.ets 1437@Entry 1438@Component 1439struct styled_string_bind_events_demo { 1440 scroll: Scroller = new Scroller(); 1441 fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Blue }); 1442 private uiContext: UIContext = this.getUIContext(); 1443 clickGestureAttr: GestureStyle = new GestureStyle({ 1444 onClick: () => { 1445 this.uiContext.getPromptAction().showToast({ message: 'clickGestureAttr object trigger click event' }); 1446 this.backgroundColor1 = Color.Yellow; 1447 } 1448 }) 1449 gestureStyleAttr: GestureStyle = new GestureStyle({ 1450 onClick: () => { 1451 this.uiContext.getPromptAction().showToast({ message: 'gestureStyleAttr object trigger click event' }); 1452 this.backgroundColor1 = Color.Green; 1453 }, 1454 onLongPress: () => { 1455 this.uiContext.getPromptAction().showToast({ message: 'gestureStyleAttr object trigger long press event' }); 1456 this.backgroundColor1 = Color.Orange; 1457 }, 1458 onTouch: () => { 1459 this.uiContext.getPromptAction().showToast({ message: 'gestureStyleAttr object trigger touch event' }); 1460 this.backgroundColor1 = Color.Red; 1461 } 1462 }); 1463 // 创建事件的对象mutableStyledString3 1464 mutableStyledString3: MutableStyledString = new MutableStyledString("hello world", [{ 1465 start: 0, 1466 length: 5, 1467 styledKey: StyledStringKey.GESTURE, 1468 styledValue: this.clickGestureAttr 1469 }, 1470 { 1471 start: 0, 1472 length: 5, 1473 styledKey: StyledStringKey.FONT, 1474 styledValue: this.fontStyleAttr1 1475 }, 1476 { 1477 start: 6, 1478 length: 5, 1479 styledKey: StyledStringKey.GESTURE, 1480 styledValue: this.gestureStyleAttr 1481 }, 1482 { 1483 start: 6, 1484 length: 5, 1485 styledKey: StyledStringKey.FONT, 1486 styledValue: new TextStyle({ fontColor: Color.Pink }) 1487 }]); 1488 @State backgroundColor1: ResourceColor | undefined = undefined; 1489 controller3: TextController = new TextController(); 1490 1491 async onPageShow() { 1492 this.controller3.setStyledString(this.mutableStyledString3); 1493 } 1494 1495 build() { 1496 Column() { 1497 Scroll(this.scroll) { 1498 Column({ space: 30 }) { 1499 Button("响应属性字符串事件改变背景色").backgroundColor(this.backgroundColor1).width('80%') 1500 // 包含事件的属性字符串 1501 Text(undefined, { controller: this.controller3 }).fontSize(30) 1502 .copyOption(CopyOptions.InApp) 1503 .draggable(true) 1504 .clip(true) 1505 }.width('100%') 1506 } 1507 .expandSafeArea([SafeAreaType.KEYBOARD]) 1508 .scrollable(ScrollDirection.Vertical) 1509 .scrollBar(BarState.On) 1510 .scrollBarColor(Color.Gray) 1511 .scrollBarWidth(10) 1512 .edgeEffect(EdgeEffect.None) 1513 } 1514 .width('100%') 1515 } 1516} 1517``` 1518 1519 1520 1521### 示例3（设置文本样式） 1522 1523从API version 12开始，该示例通过[getStyles](#getstyles)、[setStyle](#setstyle)接口实现属性字符串查询和设置样式。 1524 1525```ts 1526// xxx.ets 1527import { LengthMetrics, LengthUnit } from '@kit.ArkUI'; 1528 1529@Entry 1530@Component 1531struct styled_string_set_text_style_demo { 1532 fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Blue }); 1533 fontStyleAttr2: TextStyle = new TextStyle({ 1534 fontColor: Color.Orange, 1535 fontSize: LengthMetrics.vp(20), 1536 fontWeight: FontWeight.Bolder, 1537 fontStyle: FontStyle.Italic, 1538 fontFamily: "Arial", 1539 superscript: SuperscriptStyle.SUPERSCRIPT 1540 }); 1541 fontStyleAttr3: TextStyle = new TextStyle({ 1542 fontColor: Color.Orange, 1543 fontSize: LengthMetrics.vp(20), 1544 fontWeight: FontWeight.Lighter, 1545 fontStyle: FontStyle.Italic, 1546 fontFamily: "Arial", 1547 superscript: SuperscriptStyle.SUBSCRIPT 1548 }); 1549 // 创建多重TextStyle样式的对象mutableStyledString1 1550 mutableStyledString1: MutableStyledString = new MutableStyledString("运动45分钟", [{ 1551 start: 0, 1552 length: 2, 1553 styledKey: StyledStringKey.FONT, 1554 styledValue: this.fontStyleAttr3 1555 }, { 1556 start: 2, 1557 length: 2, 1558 styledKey: StyledStringKey.FONT, 1559 styledValue: this.fontStyleAttr2 1560 } 1561 ]); 1562 // 创建有多种样式组合对象mutableStyledString2 1563 mutableStyledString2: MutableStyledString = new MutableStyledString("test hello world", [{ 1564 start: 0, 1565 length: 5, 1566 styledKey: StyledStringKey.FONT, 1567 styledValue: this.fontStyleAttr1 1568 }, { 1569 start: 0, 1570 length: 5, 1571 styledKey: StyledStringKey.DECORATION, 1572 styledValue: new DecorationStyle({ type: TextDecorationType.LineThrough, color: Color.Blue }) 1573 }, { 1574 start: 0, 1575 length: 5, 1576 styledKey: StyledStringKey.TEXT_SHADOW, 1577 styledValue: new TextShadowStyle({ 1578 radius: 5, 1579 type: ShadowType.COLOR, 1580 color: Color.Yellow, 1581 offsetX: 10, 1582 offsetY: -10 1583 }) 1584 }, { 1585 start: 0, 1586 length: 5, 1587 styledKey: StyledStringKey.BASELINE_OFFSET, 1588 styledValue: new BaselineOffsetStyle(LengthMetrics.px(20)) 1589 }, { 1590 start: 0, 1591 length: 5, 1592 styledKey: StyledStringKey.LETTER_SPACING, 1593 styledValue: new LetterSpacingStyle(new LengthMetrics(10, LengthUnit.VP)) 1594 }, { 1595 start: 6, 1596 length: 5, 1597 styledKey: StyledStringKey.BASELINE_OFFSET, 1598 styledValue: new BaselineOffsetStyle(LengthMetrics.fp(10)) 1599 } 1600 ]); 1601 @State fontColor1: ResourceColor = Color.Red; 1602 controller: TextController = new TextController(); 1603 options: TextOptions = { controller: this.controller }; 1604 controller2: TextController = new TextController(); 1605 spanStyle1: SpanStyle = { 1606 start: 0, 1607 length: 5, 1608 styledKey: StyledStringKey.FONT, 1609 styledValue: new TextStyle({ fontColor: Color.Pink }) 1610 }; 1611 1612 async onPageShow() { 1613 this.controller.setStyledString(this.mutableStyledString1); 1614 this.controller2.setStyledString(this.mutableStyledString2); 1615 } 1616 1617 build() { 1618 Column() { 1619 Column({ space: 10 }) { 1620 // 显示配了字体各种样式的属性字符串，Text组件亦配置冲突部分生效属性字符串配置，未冲突区间生效Text组件属性设置值 1621 Text(undefined, this.options) 1622 .fontColor(this.fontColor1) 1623 .font({ size: 20, weight: 500, style: FontStyle.Normal }) 1624 // 显示配置了文本阴影、划线、字符间距、基线偏移量的属性字符串，Text组件亦配置生效属性字符串配置 1625 Text(undefined, { controller: this.controller2 }) 1626 .fontSize(30) 1627 .copyOption(CopyOptions.InApp) 1628 .draggable(true) 1629 .decoration({ type: TextDecorationType.Overline, color: Color.Pink }) 1630 .textShadow({ 1631 radius: 10, 1632 type: ShadowType.COLOR, 1633 color: Color.Green, 1634 offsetX: -10, 1635 offsetY: 10 1636 }) 1637 Button('查询字体样式') 1638 .onClick(() => { 1639 let styles = this.mutableStyledString1.getStyles(0, this.mutableStyledString1.length); 1640 if (styles.length !== 0) { 1641 for (let i = 0; i < styles.length; i++) { 1642 console.info('mutableStyledString1 style object start:' + styles[i].start); 1643 console.info('mutableStyledString1 style object length:' + styles[i].length); 1644 console.info('mutableStyledString1 style object key:' + styles[i].styledKey); 1645 if (styles[i].styledKey === 0) { 1646 let fontAttr = styles[i].styledValue as TextStyle; 1647 console.info('mutableStyledString1 fontColor:' + fontAttr.fontColor); 1648 console.info('mutableStyledString1 fontSize:' + fontAttr.fontSize); 1649 console.info('mutableStyledString1 fontWeight:' + fontAttr.fontWeight); 1650 console.info('mutableStyledString1 fontStyle:' + fontAttr.fontStyle); 1651 console.info('mutableStyledString1 fontFamily:' + fontAttr.fontFamily); 1652 console.info('mutableStyledString1 superscript:' + fontAttr.superscript); 1653 } 1654 } 1655 } 1656 }) 1657 .margin({ top: 10 }) 1658 Button('查询其他文本样式') 1659 .onClick(() => { 1660 let styles = this.mutableStyledString2.getStyles(0, this.mutableStyledString2.length); 1661 if (styles.length !== 0) { 1662 for (let i = 0; i < styles.length; i++) { 1663 console.info('mutableStyledString2 style object start:' + styles[i].start); 1664 console.info('mutableStyledString2 style object length:' + styles[i].length); 1665 console.info('mutableStyledString2 style object key:' + styles[i].styledKey); 1666 if (styles[i].styledKey === 1) { 1667 let decoAttr = styles[i].styledValue as DecorationStyle; 1668 console.info('mutableStyledString2 decoration type:' + decoAttr.type); 1669 console.info('mutableStyledString2 decoration color:' + decoAttr.color); 1670 } 1671 if (styles[i].styledKey === 2) { 1672 let baselineAttr = styles[i].styledValue as BaselineOffsetStyle; 1673 console.info('mutableStyledString2 baselineOffset:' + baselineAttr.baselineOffset); 1674 } 1675 if (styles[i].styledKey === 3) { 1676 let letterAttr = styles[i].styledValue as LetterSpacingStyle; 1677 console.info('mutableStyledString2 letterSpacing:' + letterAttr.letterSpacing); 1678 } 1679 if (styles[i].styledKey === 4) { 1680 let textShadowAttr = styles[i].styledValue as TextShadowStyle; 1681 let shadowValues = textShadowAttr.textShadow; 1682 if (shadowValues.length > 0) { 1683 for (let j = 0; j < shadowValues.length; j++) { 1684 console.info('mutableStyledString2 textShadow type:' + shadowValues[j].type); 1685 console.info('mutableStyledString2 textShadow radius:' + shadowValues[j].radius); 1686 console.info('mutableStyledString2 textShadow color:' + shadowValues[j].color); 1687 console.info('mutableStyledString2 textShadow offsetX:' + shadowValues[j].offsetX); 1688 console.info('mutableStyledString2 textShadow offsetY:' + shadowValues[j].offsetY); 1689 } 1690 } 1691 } 1692 } 1693 } 1694 }) 1695 .margin({ top: 10 }) 1696 Button('更新mutableStyledString1样式') 1697 .onClick(() => { 1698 this.mutableStyledString1.setStyle(this.spanStyle1); 1699 this.controller.setStyledString(this.mutableStyledString1); 1700 }) 1701 .margin({ top: 10 }) 1702 }.width('100%') 1703 } 1704 .width('100%') 1705 } 1706} 1707``` 1708 1709 1710### 示例4（设置图片） 1711 1712从API version 12开始，该示例通过[ImageAttachment](#imageattachmentinterface对象说明)接口实现属性字符串设置图片。 1713 1714```ts 1715// xxx.ets 1716import { image } from '@kit.ImageKit'; 1717import { LengthMetrics } from '@kit.ArkUI'; 1718 1719@Entry 1720@Component 1721struct styled_string_set_image_demo { 1722 @State message: string = 'Hello World'; 1723 imagePixelMap: image.PixelMap | undefined = undefined; 1724 @State imagePixelMap3: image.PixelMap | undefined = undefined; 1725 mutableStr: MutableStyledString = new MutableStyledString('123'); 1726 controller: TextController = new TextController(); 1727 private uiContext: UIContext = this.getUIContext(); 1728 mutableStr2: MutableStyledString = new MutableStyledString('This is set decoration line style to the mutableStr2', [{ 1729 start: 0, 1730 length: 15, 1731 styledKey: StyledStringKey.DECORATION, 1732 styledValue: new DecorationStyle({ 1733 type: TextDecorationType.Overline, 1734 color: Color.Orange, 1735 style: TextDecorationStyle.DOUBLE 1736 }) 1737 }]); 1738 1739 async aboutToAppear() { 1740 console.info("aboutToAppear initial imagePixelMap"); 1741 // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。 1742 this.imagePixelMap = 1743 await this.getPixmapFromMedia($r('app.media.startIcon')); 1744 } 1745 1746 private async getPixmapFromMedia(resource: Resource) { 1747 let unit8Array = await this.uiContext.getHostContext()?.resourceManager?.getMediaContent(resource.id); 1748 let imageSource = image.createImageSource(unit8Array?.buffer.slice(0, unit8Array.buffer.byteLength)); 1749 let createPixelMap: image.PixelMap = await imageSource.createPixelMap({ 1750 desiredPixelFormat: image.PixelMapFormat.RGBA_8888 1751 }); 1752 await imageSource.release(); 1753 return createPixelMap; 1754 } 1755 1756 build() { 1757 Row() { 1758 Column({ space: 5 }) { 1759 Text(undefined, { controller: this.controller }) 1760 .copyOption(CopyOptions.InApp) 1761 .draggable(true) 1762 .fontSize(30) 1763 Button('设置图片') 1764 .onClick(() => { 1765 if (this.imagePixelMap !== undefined) { 1766 this.mutableStr = new MutableStyledString(new ImageAttachment({ 1767 value: this.imagePixelMap, 1768 size: { width: 50, height: 50 }, 1769 layoutStyle: { borderRadius: LengthMetrics.vp(10) }, 1770 verticalAlign: ImageSpanAlignment.BASELINE, 1771 objectFit: ImageFit.Contain 1772 })); 1773 this.controller.setStyledString(this.mutableStr); 1774 } 1775 }) 1776 Button('设置资源类型图片') 1777 .onClick(() => { 1778 if (this.imagePixelMap !== undefined) { 1779 this.mutableStr = new MutableStyledString(new ImageAttachment({ 1780 // $r('app.media.sky')需要替换为开发者所需的图像资源文件。 1781 resourceValue: $r('app.media.sky'), 1782 size: { width: 50, height: 50 }, 1783 layoutStyle: { borderRadius: LengthMetrics.vp(10) }, 1784 verticalAlign: ImageSpanAlignment.BASELINE, 1785 objectFit: ImageFit.Contain, 1786 syncLoad: true 1787 })); 1788 this.controller.setStyledString(this.mutableStr); 1789 } 1790 }) 1791 Button('Image之Get') 1792 .onClick(() => { 1793 let imageArray = this.mutableStr.getStyles(0, 1, StyledStringKey.IMAGE); 1794 for (let i = 0; i < imageArray.length; ++i) { 1795 console.info('mutableStr start ' + imageArray[i].start + ' length ' + imageArray[i].length + ' type ' + 1796 imageArray[i].styledKey); 1797 if (imageArray[i].styledKey === 300) { 1798 let attachment = imageArray[i].styledValue as ImageAttachment; 1799 this.imagePixelMap3 = attachment.value; 1800 console.info('mutableStr value ' + JSON.stringify(attachment.value)); 1801 if (attachment.size !== undefined) { 1802 console.info('mutableStr size width ' + attachment.size.width + ' height ' + attachment.size.height); 1803 } 1804 console.info('mutableStr vertical ' + attachment.verticalAlign); 1805 console.info('mutableStr fit ' + attachment.objectFit); 1806 if (attachment.layoutStyle !== undefined) { 1807 let radius = attachment.layoutStyle.borderRadius as BorderRadiuses; 1808 console.info('mutableStr radius ' + JSON.stringify(radius)); 1809 } 1810 } 1811 } 1812 }) 1813 Image(this.imagePixelMap3).width(50).height(50) 1814 Button('Image之Append') 1815 .onClick(() => { 1816 let str = new StyledString('123'); 1817 this.mutableStr.appendStyledString(str); 1818 this.controller.setStyledString(this.mutableStr); 1819 }) 1820 Button('Image之Insert 前') 1821 .onClick(() => { 1822 this.mutableStr.insertString(0, '123'); 1823 this.controller.setStyledString(this.mutableStr); 1824 }) 1825 Button('Image之Insert 后') 1826 .onClick(() => { 1827 this.mutableStr.insertString(1, '123'); 1828 this.controller.setStyledString(this.mutableStr); 1829 }) 1830 Button('Image之replace') 1831 .onClick(() => { 1832 this.mutableStr.replaceString(2, 5, "789"); 1833 this.controller.setStyledString(this.mutableStr); 1834 }) 1835 } 1836 .width('100%') 1837 } 1838 .height('100%') 1839 } 1840} 1841``` 1842 1843 1844 1845### 示例5（设置文本行高和段落样式） 1846 1847从API version 12开始，该示例通过[LineHeightStyle](#lineheightstyle)、[ParagraphStyle](#paragraphstyle)接口实现属性字符串设置文本行高和段落样式。 1848 1849```ts 1850import { LengthMetrics } from '@kit.ArkUI'; 1851 1852const canvasWidth = 1000; 1853const canvasHeight = 100; 1854 1855class LeadingMarginCreator { 1856 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1857 private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(canvasWidth, canvasHeight); 1858 private offContext: OffscreenCanvasRenderingContext2D = this.offscreenCanvas.getContext("2d", this.settings); 1859 public static instance: LeadingMarginCreator = new LeadingMarginCreator(); 1860 1861 public genSquareMark(fontSize: number): PixelMap { 1862 this.offContext = this.offscreenCanvas.getContext("2d", this.settings); 1863 this.clearCanvas(); 1864 const coordinate = fontSize * (1 - 1 / 1.5) / 2; 1865 const sideLength = fontSize / 1.5; 1866 this.offContext.fillRect(coordinate, coordinate, sideLength, sideLength); 1867 return this.offContext.getPixelMap(0, 0, fontSize, fontSize); 1868 } 1869 1870 private clearCanvas() { 1871 this.offContext.clearRect(0, 0, canvasWidth, canvasHeight); 1872 } 1873} 1874 1875@Entry 1876@Component 1877struct styled_string_set_lineheight_paragraphstyle_demo { 1878 private leadingMarkCreatorInstance = LeadingMarginCreator.instance; 1879 leadingMarginPlaceholder1: LeadingMarginPlaceholder = { 1880 pixelMap: this.leadingMarkCreatorInstance.genSquareMark(24), 1881 size: [15, 15] 1882 }; 1883 titleParagraphStyleAttr: ParagraphStyle = 1884 new ParagraphStyle({ textAlign: TextAlign.Center, paragraphSpacing: LengthMetrics.px(10) }); 1885 //第一段落首行缩进15vp 1886 paragraphStyleAttr1: ParagraphStyle = new ParagraphStyle({ textIndent: LengthMetrics.vp(15) }); 1887 //第二段落缩进15vp且首行有placeholder占位显示 1888 paragraphStyleAttr2: ParagraphStyle = 1889 new ParagraphStyle({ textAlign: TextAlign.Start, leadingMargin: this.leadingMarginPlaceholder1 }); 1890 //第三段落不设置缩进配置最大行数及超长显示方式 1891 paragraphStyleAttr3: ParagraphStyle = new ParagraphStyle({ 1892 textAlign: TextAlign.End, 1893 textVerticalAlign: TextVerticalAlign.BASELINE, 1894 maxLines: 1, 1895 wordBreak: WordBreak.BREAK_ALL, 1896 overflow: TextOverflow.Ellipsis 1897 }); 1898 //行高样式对象 1899 lineHeightStyle1: LineHeightStyle = new LineHeightStyle(new LengthMetrics(24)); 1900 //创建含段落样式的对象paragraphStyledString1 1901 paragraphStyledString1: StyledString = 1902 new StyledString("段落标题\n正文第一段落开始0123456789正文第一段落结束\n正文第二段落开始hello world正文第二段落结束\n正文第三段落ABCDEFGHIJKLMNOPQRSTUVWXYZ。", 1903 [ 1904 { 1905 start: 0, 1906 length: 4, 1907 styledKey: StyledStringKey.PARAGRAPH_STYLE, 1908 styledValue: this.titleParagraphStyleAttr 1909 }, 1910 { 1911 start: 0, 1912 length: 4, 1913 styledKey: StyledStringKey.LINE_HEIGHT, 1914 styledValue: new LineHeightStyle(new LengthMetrics(50)) 1915 }, { 1916 start: 0, 1917 length: 4, 1918 styledKey: StyledStringKey.FONT, 1919 styledValue: new TextStyle({ fontSize: LengthMetrics.vp(24), fontWeight: FontWeight.Bolder }) 1920 }, 1921 { 1922 start: 5, 1923 length: 3, 1924 styledKey: StyledStringKey.PARAGRAPH_STYLE, 1925 styledValue: this.paragraphStyleAttr1 1926 }, 1927 { 1928 start: 5, 1929 length: 20, 1930 styledKey: StyledStringKey.LINE_HEIGHT, 1931 styledValue: this.lineHeightStyle1 1932 }, 1933 { 1934 start: 32, 1935 length: 5, 1936 styledKey: StyledStringKey.PARAGRAPH_STYLE, 1937 styledValue: this.paragraphStyleAttr2 1938 }, 1939 { 1940 start: 32, 1941 length: 20, 1942 styledKey: StyledStringKey.LINE_HEIGHT, 1943 styledValue: this.lineHeightStyle1 1944 }, 1945 { 1946 start: 60, 1947 length: 5, 1948 styledKey: StyledStringKey.PARAGRAPH_STYLE, 1949 styledValue: this.paragraphStyleAttr3 1950 }, 1951 { 1952 start: 60, 1953 length: 5, 1954 styledKey: StyledStringKey.LINE_HEIGHT, 1955 styledValue: this.lineHeightStyle1 1956 } 1957 ]); 1958 controller: TextController = new TextController(); 1959 1960 async onPageShow() { 1961 this.controller.setStyledString(this.paragraphStyledString1); 1962 } 1963 1964 build() { 1965 Row() { 1966 Column({ space: 5 }) { 1967 Text(undefined, { controller: this.controller }) 1968 .width(240) 1969 .borderWidth(1) 1970 .copyOption(CopyOptions.InApp) 1971 .draggable(true) 1972 1973 //查询段落样式 1974 Text() 1975 .onClick(() => { 1976 let styles = this.paragraphStyledString1.getStyles(0, this.paragraphStyledString1.length); 1977 if (styles.length !== 0) { 1978 for (let i = 0; i < styles.length; i++) { 1979 console.info('paragraphStyledString1 style object start:' + styles[i].start); 1980 console.info('paragraphStyledString1 style object length:' + styles[i].length); 1981 console.info('paragraphStyledString1 style object key:' + styles[i].styledKey); 1982 if (styles[i].styledKey === 200) { 1983 let paraAttr = styles[i].styledValue as ParagraphStyle; 1984 console.info('paragraphStyledString1 textAlign:' + paraAttr.textAlign); 1985 console.info('paragraphStyledString1 textIndent:' + paraAttr.textIndent); 1986 console.info('paragraphStyledString1 maxLines:' + paraAttr.maxLines); 1987 console.info('paragraphStyledString1 wordBreak:' + paraAttr.wordBreak); 1988 console.info('paragraphStyledString1 leadingMargin:' + paraAttr.leadingMargin); 1989 console.info('paragraphStyledString1 overflow:' + paraAttr.overflow); 1990 } 1991 } 1992 } 1993 }) 1994 .margin({ top: 10 }) 1995 } 1996 .width('100%') 1997 } 1998 .height('100%') 1999 } 2000} 2001``` 2002 2003 2004 2005### 示例6（设置自定义绘制Span） 2006 2007从API version 12开始，该示例通过[CustomSpan](#customspan)接口实现属性字符串设置自定义绘制Span。 2008 2009```ts 2010// xxx.ets 2011import { drawing } from '@kit.ArkGraphics2D'; 2012import { LengthMetrics } from '@kit.ArkUI'; 2013 2014let gUIContext: UIContext; 2015 2016class MyCustomSpan extends CustomSpan { 2017 constructor(word: string, width: number, height: number) { 2018 super(); 2019 this.word = word; 2020 this.width = width; 2021 this.height = height; 2022 } 2023 2024 onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics { 2025 return { width: this.width, height: this.height }; 2026 } 2027 2028 onDraw(context: DrawContext, options: CustomSpanDrawInfo) { 2029 let canvas = context.canvas; 2030 2031 const brush = new drawing.Brush(); 2032 brush.setColor({ 2033 alpha: 255, 2034 red: 0, 2035 green: 74, 2036 blue: 175 2037 }); 2038 const font = new drawing.Font(); 2039 font.setSize(25); 2040 const textBlob = drawing.TextBlob.makeFromString(this.word, font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 2041 canvas.attachBrush(brush); 2042 canvas.drawRect({ 2043 left: options.x + 10, 2044 right: options.x + gUIContext.vp2px(this.width) - 10, 2045 top: options.lineTop + 10, 2046 bottom: options.lineBottom - 10 2047 }); 2048 2049 brush.setColor({ 2050 alpha: 255, 2051 red: 23, 2052 green: 169, 2053 blue: 141 2054 }); 2055 canvas.attachBrush(brush); 2056 canvas.drawTextBlob(textBlob, options.x + 20, options.lineBottom - 15); 2057 canvas.detachBrush(); 2058 } 2059 2060 setWord(word: string) { 2061 this.word = word; 2062 } 2063 2064 width: number = 160; 2065 word: string = "drawing"; 2066 height: number = 10; 2067} 2068 2069@Entry 2070@Component 2071struct styled_string_set_customspan_demo { 2072 customSpan1: MyCustomSpan = new MyCustomSpan("Hello", 80, 10); 2073 customSpan2: MyCustomSpan = new MyCustomSpan("World", 80, 40); 2074 style: MutableStyledString = new MutableStyledString(this.customSpan1); 2075 textController: TextController = new TextController(); 2076 isPageShow: boolean = true; 2077 2078 aboutToAppear() { 2079 gUIContext = this.getUIContext(); 2080 } 2081 2082 async onPageShow() { 2083 if (!this.isPageShow) { 2084 return; 2085 } 2086 this.isPageShow = false; 2087 2088 this.style.appendStyledString(new MutableStyledString("文本绘制 示例代码 CustomSpan", [ 2089 { 2090 start: 0, 2091 length: 5, 2092 styledKey: StyledStringKey.FONT, 2093 styledValue: new TextStyle({ fontColor: Color.Pink }) 2094 }, { 2095 start: 5, 2096 length: 5, 2097 styledKey: StyledStringKey.FONT, 2098 styledValue: new TextStyle({ fontColor: Color.Orange, fontStyle: FontStyle.Italic }) 2099 }, { 2100 start: 10, 2101 length: 500, 2102 styledKey: StyledStringKey.FONT, 2103 styledValue: new TextStyle({ fontColor: Color.Green, fontWeight: FontWeight.Bold }) 2104 } 2105 ])); 2106 this.style.appendStyledString(new StyledString(this.customSpan2)); 2107 this.style.appendStyledString(new StyledString("自定义绘制", [{ 2108 start: 0, 2109 length: 5, 2110 styledKey: StyledStringKey.FONT, 2111 styledValue: new TextStyle({ fontColor: Color.Green, fontSize: LengthMetrics.px(50) }) 2112 }])); 2113 this.textController.setStyledString(this.style); 2114 } 2115 2116 build() { 2117 Row() { 2118 Column() { 2119 Text(undefined, { controller: this.textController }) 2120 .copyOption(CopyOptions.InApp) 2121 .fontSize(30) 2122 2123 Button("invalidate").onClick(() => { 2124 this.customSpan1.setWord("你好"); 2125 this.customSpan1.invalidate(); 2126 }) 2127 } 2128 .width('100%') 2129 } 2130 .height('100%') 2131 } 2132} 2133``` 2134 2135 2136 2137### 示例7（支持存储自定义扩展信息） 2138 2139从API version 12开始，该示例通过[UserDataSpan](#userdataspan)接口实现属性字符串支持存储自定义扩展信息的功能。 2140 2141```ts 2142// xxx.ets 2143class MyUserDataSpan extends UserDataSpan { 2144 constructor(name: string, age: number) { 2145 super(); 2146 this.name = name; 2147 this.age = age; 2148 } 2149 2150 name: string; 2151 age: number; 2152} 2153 2154@Entry 2155@Component 2156struct styled_string_set_userdataspan_demo { 2157 @State name: string = "world"; 2158 @State age: number = 10; 2159 controller: TextController = new TextController(); 2160 styleString: MutableStyledString = new MutableStyledString("hello world", [{ 2161 start: 0, 2162 length: 11, 2163 styledKey: StyledStringKey.USER_DATA, 2164 styledValue: new MyUserDataSpan("hello", 21) 2165 }]); 2166 2167 onPageShow(): void { 2168 this.controller.setStyledString(this.styleString); 2169 } 2170 2171 build() { 2172 Column() { 2173 Text(undefined, { controller: this.controller }) 2174 Button("get user data").onClick(() => { 2175 let arr = this.styleString.getStyles(0, this.styleString.length); 2176 let userDataSpan = arr[0].styledValue as MyUserDataSpan; 2177 this.name = userDataSpan.name; 2178 this.age = userDataSpan.age; 2179 }) 2180 Text("name:" + this.name + " age: " + this.age) 2181 }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 }) 2182 } 2183} 2184``` 2185 2186 2187 2188### 示例8（设置超链接） 2189 2190从API version 14开始，该示例通过[UrlStyle](#urlstyle14)接口，实现了对属性字符串中超链接设置的支持。 2191 2192```ts 2193// xxx.ets 2194@Entry 2195@Component 2196struct styled_string_set_urlstyle_demo { 2197 urlString: UrlStyle = new UrlStyle("https://www.example.com"); 2198 mutableStyledString: MutableStyledString = new MutableStyledString("Hello World", [{ 2199 start: 0, 2200 length: "Hello".length, 2201 styledKey: StyledStringKey.URL, 2202 styledValue: this.urlString 2203 }]); 2204 controller: TextController = new TextController(); 2205 2206 async onPageShow() { 2207 this.controller.setStyledString(this.mutableStyledString); 2208 } 2209 2210 build() { 2211 Column() { 2212 Column() { 2213 Text(undefined, { controller: this.controller }).key('mutableStyledString').fontSize(30) 2214 } 2215 }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 }) 2216 } 2217} 2218``` 2219 2220 2221 2222 2223### 示例9 (给图片设置colorFilter) 2224 2225从API version 15开始，该示例通过给[ImageAttachment](#imageattachmentinterface对象说明)设置colorFilter实现了给图像设置颜色滤镜效果。 2226 2227``` ts 2228// xxx.ets 2229import { LengthMetrics } from '@kit.ArkUI'; 2230import { drawing, common2D } from '@kit.ArkGraphics2D'; 2231 2232@Entry 2233@Component 2234struct styled_string_set_image_colorfilter_demo { 2235 @State message: string = 'Hello World'; 2236 mutableStr: MutableStyledString = new MutableStyledString('origin image:'); 2237 mutableStr2: MutableStyledString = new MutableStyledString('with filter:'); 2238 controller: TextController = new TextController(); 2239 controller2: TextController = new TextController(); 2240 private color: common2D.Color = { 2241 alpha: 125, 2242 red: 125, 2243 green: 125, 2244 blue: 255 2245 }; 2246 2247 build() { 2248 Row() { 2249 Column({ space: 5 }) { 2250 Text(undefined, { controller: this.controller }) 2251 .copyOption(CopyOptions.InApp) 2252 .draggable(true) 2253 .fontSize(30) 2254 .onAppear(() => { 2255 this.mutableStr = new MutableStyledString(new ImageAttachment({ 2256 // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。 2257 resourceValue: $r('app.media.startIcon'), 2258 size: { width: 50, height: 50 }, 2259 layoutStyle: { borderRadius: LengthMetrics.vp(10) }, 2260 verticalAlign: ImageSpanAlignment.BASELINE, 2261 objectFit: ImageFit.Contain, 2262 syncLoad: true 2263 })); 2264 this.controller.setStyledString(this.mutableStr); 2265 }) 2266 Text(undefined, { controller: this.controller2 }) 2267 .copyOption(CopyOptions.InApp) 2268 .draggable(true) 2269 .fontSize(30) 2270 Button('set image color filter') 2271 .onClick(() => { 2272 this.mutableStr2 = new MutableStyledString(new ImageAttachment({ 2273 // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。 2274 resourceValue: $r('app.media.startIcon'), 2275 size: { width: 50, height: 50 }, 2276 layoutStyle: { borderRadius: LengthMetrics.vp(10) }, 2277 verticalAlign: ImageSpanAlignment.BASELINE, 2278 objectFit: ImageFit.Contain, 2279 colorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN), 2280 syncLoad: true 2281 })); 2282 this.controller2.setStyledString(this.mutableStr2); 2283 }) 2284 } 2285 .width('100%') 2286 } 2287 .height('100%') 2288 } 2289} 2290``` 2291 2292 2293 2294### 示例10（属性字符串的插入、删除、替换） 2295 2296从API version 12开始，该示例通过[subStyledString](#substyledstring)、[removeString](#removestring)、[removeStyle](#removestyle)、[clearStyles](#clearstyles)、[replaceStyledString](#replacestyledstring)、[insertStyledString](#insertstyledstring)接口实现属性字符串的插入、删除、替换。 2297 2298``` ts 2299// xxx.ets 2300@Entry 2301@Component 2302struct styled_string_modify_demo { 2303 @State message: string = 'Hello World'; 2304 mutableStr: MutableStyledString = new MutableStyledString('123456', [{ 2305 start: 0, 2306 length: 2, 2307 styledKey: StyledStringKey.FONT, 2308 styledValue: new TextStyle({ fontColor: Color.Red }) 2309 }, { 2310 start: 0, 2311 length: 3, 2312 styledKey: StyledStringKey.DECORATION, 2313 styledValue: new DecorationStyle({ type: TextDecorationType.LineThrough }) 2314 }]); 2315 mutableStr2: MutableStyledString = new MutableStyledString('with filter:'); 2316 controller: TextController = new TextController(); 2317 controller2: TextController = new TextController(); 2318 2319 build() { 2320 Row() { 2321 Column({ space: 5 }) { 2322 Text(undefined, { controller: this.controller }) 2323 .copyOption(CopyOptions.InApp) 2324 .draggable(true) 2325 .fontSize(30) 2326 .onAppear(() => { 2327 this.controller.setStyledString(this.mutableStr); 2328 }) 2329 Text(undefined, { controller: this.controller2 }) 2330 .copyOption(CopyOptions.InApp) 2331 .draggable(true) 2332 .fontSize(30) 2333 Button('GetSubStyledString (0,3)').onClick(() => { 2334 this.controller2.setStyledString(this.mutableStr.subStyledString(0, 3)); 2335 }) 2336 Button('RemoveStyle (0,1,Decoration)').onClick(() => { 2337 this.mutableStr.removeStyle(0, 1, StyledStringKey.DECORATION); 2338 this.controller.setStyledString(this.mutableStr); 2339 }) 2340 Button('RemoveString (5,1)').onClick(() => { 2341 this.mutableStr.removeString(5, 1); 2342 this.controller.setStyledString(this.mutableStr); 2343 }) 2344 Button('ClearStyles').onClick(() => { 2345 this.mutableStr.clearStyles(); 2346 this.controller.setStyledString(this.mutableStr); 2347 }) 2348 Button('replaceStyledString').onClick(() => { 2349 this.mutableStr.replaceStyledString(3, 1, new StyledString("abc", [{ 2350 start: 0, 2351 length: 3, 2352 styledKey: StyledStringKey.FONT, 2353 styledValue: new TextStyle({ fontColor: Color.Blue }) 2354 }])); 2355 this.controller.setStyledString(this.mutableStr); 2356 }) 2357 Button('insertStyledString').onClick(() => { 2358 this.mutableStr.insertStyledString(4, new StyledString("A")); 2359 this.controller.setStyledString(this.mutableStr); 2360 }) 2361 } 2362 .width('100%') 2363 } 2364 .height('100%') 2365 } 2366} 2367``` 2368 2369 2370 2371### 示例11（属性字符串的文本描边） 2372 2373从API version 20开始，该示例通过[TextStyle](#textstyle)设置strokeWidth和strokeColor接口实现属性字符串的文本描边。 2374 2375``` ts 2376// xxx.ets 2377import { LengthMetrics } from '@kit.ArkUI'; 2378 2379@Entry 2380@Component 2381struct styled_string_strokewidth_strokecolor_demo { 2382 @State string1: string = "Hello"; 2383 spanStyle: SpanStyle = { 2384 start: 0, 2385 length: 5, 2386 styledKey: StyledStringKey.FONT, 2387 styledValue: new TextStyle({ 2388 fontColor: '#ff2787d9', 2389 strokeWidth: LengthMetrics.px(-5), 2390 strokeColor: Color.Black, 2391 fontWeight: FontWeight.Bolder, 2392 fontSize: LengthMetrics.px(100) 2393 }) 2394 }; 2395 spanStyle1: SpanStyle = { 2396 start: 0, 2397 length: 5, 2398 styledKey: StyledStringKey.FONT, 2399 styledValue: new TextStyle({ 2400 fontColor: '#ff2787d9', 2401 strokeWidth: LengthMetrics.px(5), 2402 strokeColor: Color.Black, 2403 fontWeight: FontWeight.Bolder, 2404 fontSize: LengthMetrics.px(100) 2405 }) 2406 }; 2407 2408 mutableStyledString: MutableStyledString = new MutableStyledString(this.string1, []); 2409 controller: TextController = new TextController(); 2410 2411 mutableStyledString1: MutableStyledString = new MutableStyledString(this.string1, []); 2412 controller1: TextController = new TextController(); 2413 2414 async onPageShow() { 2415 this.mutableStyledString.setStyle(this.spanStyle) 2416 this.controller.setStyledString(this.mutableStyledString); 2417 2418 this.mutableStyledString1.setStyle(this.spanStyle1) 2419 this.controller1.setStyledString(this.mutableStyledString1); 2420 } 2421 2422 build() { 2423 Column() { 2424 //实心字 2425 Text(undefined, { controller: this.controller }) 2426 .margin({ top: 10, bottom: 50 }) 2427 .draggable(true) 2428 .onDragStart(() => { 2429 }) 2430 //空心字 2431 Text(undefined, { controller: this.controller1 }) 2432 .margin({ top: 10, bottom: 50 }) 2433 .draggable(true) 2434 .onDragStart(() => { 2435 }) 2436 } 2437 .height('100%') 2438 .width('100%') 2439 } 2440} 2441``` 2442 2443 2444 2445### 示例12（fromHtml和toHtml互相转换） 2446 2447该示例通过[fromHtml](#fromhtml)（从API version 12开始）、[toHtml](#tohtml14)（从API version 14开始）接口，将HTML中b、strong、em、i、u、del、s、a、sub、sup标签及其style属性中的background-color转换为属性字符串并转回HTML。 2448 2449``` ts 2450// xxx.ets 2451@Entry 2452@Component 2453struct styled_string_html_convert_demo { 2454 @State html: string = "<p>This is <b>b</b> <strong>strong</strong> <em>em</em> <i>i</i> <u>u</u> <del>del</del> <s>s</s> <span style = \"foreground-color:blue\"> <a href='https://www.example.com'>www.example</a> </span> <span style=\"background-color: red;\">red span</span> <sup>superscript</sup> and <sub>subscript</sub></p>"; 2455 @State spanString: StyledString | undefined = undefined; 2456 @State resultText: string = ""; // 保存结果文本的状态 2457 controller: TextController = new TextController; 2458 2459 build() { 2460 Column() { 2461 // 显示转换后的spanString 2462 Text(undefined, { controller: this.controller }).height(100) 2463 2464 // TextArea显示每个步骤的结果 2465 TextArea({ text: this.html }) 2466 .width("100%") 2467 .height(100) 2468 .margin(5) 2469 2470 // 按钮1:将HTML转换为SpanString 2471 Button("将HTML转换为SpanString").onClick(async () => { 2472 this.spanString = await StyledString.fromHtml(this.html); 2473 this.controller.setStyledString(this.spanString); 2474 this.resultText = "Converted HTML to SpanString successfully."; 2475 }).margin(5) 2476 2477 // 按钮2:将SpanString转换为HTML 2478 Button("将SpanString转换为HTML").onClick(() => { 2479 if (this.spanString) { 2480 // 将spanString转换为HTML并替换当前的HTML状态 2481 const newHtml = StyledString.toHtml(this.spanString); 2482 if (newHtml !== this.html) { // 通过检查内容是否已经相同来防止重复 2483 this.html = newHtml; 2484 } 2485 this.resultText = "Converted SpanString to HTML successfully."; 2486 } else { 2487 this.resultText = "SpanString is undefined."; 2488 } 2489 }).margin(5) 2490 2491 // 按钮3:将HTML转换回SpanString 2492 Button("将HTML转换回SpanString").onClick(async () => { 2493 this.spanString = await StyledString.fromHtml(this.html); 2494 this.controller.setStyledString(this.spanString); 2495 this.resultText = "Converted HTML back to SpanString successfully."; 2496 }).margin(5) 2497 2498 // 重置：重置HTML和SpanString 2499 Button("重置").onClick(() => { 2500 this.html = "<p>This is <b>b</b> <strong>strong</strong> <em>em</em> <i>i</i> <u>u</u> <del>del</del> <s>s</s> <span style = \"foreground-color:blue\"> <a href='https://www.example.com'>www.example</a> </span> <span style=\"background-color: red;\">red span</span> <sup>superscript</sup> and <sub>subscript</sub></p>"; 2501 this.spanString = undefined; 2502 this.controller.setStyledString(new StyledString("")); // 使用空的StyledString实例 2503 this.resultText = "Reset HTML and SpanString successfully."; 2504 }).margin(5) 2505 }.width("100%").padding(20) 2506 } 2507} 2508``` 2509 2510 2511 2512### 示例13（多装饰线与加粗装饰线） 2513 2514从API version 20开始，该示例通过[DecorationStyle](#decorationstyle)中设置enableMultiType、thicknessScale接口，实现多装饰线显示与加粗装饰线的效果。 2515 2516``` ts 2517// xxx.ets 2518import { LengthMetrics } from '@kit.ArkUI' 2519@Entry 2520@Component 2521struct styled_string_set_decorationstyle_demo { 2522 @State styledString : StyledString | undefined = undefined 2523 controller : TextController = new TextController 2524 thickness: number = 2.0 2525 mutableStyledString1: MutableStyledString = new MutableStyledString("1234567890", [ 2526 { 2527 start: 0, 2528 length: 10, 2529 styledKey: StyledStringKey.FONT, 2530 styledValue: new TextStyle({ fontColor: Color.Orange, fontSize: LengthMetrics.vp(30) }) 2531 }, 2532 { 2533 start: 0, 2534 length: 4, 2535 styledKey: StyledStringKey.DECORATION, 2536 styledValue: new DecorationStyle({type: TextDecorationType.LineThrough, thicknessScale: this.thickness}, {enableMultiType: true}) 2537 }, 2538 { 2539 start: 2, 2540 length: 5, 2541 styledKey: StyledStringKey.DECORATION, 2542 styledValue: new DecorationStyle({type: TextDecorationType.Underline, thicknessScale: this.thickness}, {enableMultiType: true}) 2543 }, 2544 { 2545 start: 0, 2546 length: 4, 2547 styledKey: StyledStringKey.DECORATION, 2548 styledValue: new DecorationStyle({type: TextDecorationType.Overline, thicknessScale: this.thickness}, {enableMultiType: true}) 2549 }, 2550 { 2551 start: 6, 2552 length: 2, 2553 styledKey: StyledStringKey.DECORATION, 2554 styledValue: new DecorationStyle({type: TextDecorationType.LineThrough}) 2555 }, 2556 { 2557 start: 7, 2558 length: 2, 2559 styledKey: StyledStringKey.DECORATION, 2560 styledValue: new DecorationStyle({type: TextDecorationType.LineThrough, color: Color.Green}, {enableMultiType: true}) 2561 }, 2562 { 2563 start: 8, 2564 length: 2, 2565 styledKey: StyledStringKey.DECORATION, 2566 styledValue: new DecorationStyle({type: TextDecorationType.Overline, color: Color.Green}, {enableMultiType: true}) 2567 } 2568 ]); 2569 build() { 2570 Column({ space:3 }) { 2571 Text(undefined, { controller: this.controller }) 2572 .height(100) 2573 .copyOption(CopyOptions.LocalDevice) 2574 .onAppear(()=>{ 2575 this.styledString = this.mutableStyledString1 2576 this.controller.setStyledString(this.mutableStyledString1) 2577 }) 2578 }.width("100%") 2579 } 2580} 2581``` 2582 2583 2584
