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