1# Text 2 3显示一段文本的组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含[Span](ts-basic-components-span.md)、[ImageSpan](ts-basic-components-imagespan.md)、[SymbolSpan](ts-basic-components-symbolSpan.md)和[ContainerSpan](ts-basic-components-containerspan.md)子组件。 13 14## 接口 15 16Text(content?: string | Resource , value?: TextOptions) 17 18**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 19 20**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 21 22**系统能力：** SystemCapability.ArkUI.ArkUI.Full 23 24**参数：** 25 26| 参数名 | 类型 | 必填 | 说明 | 27| -------- | -------- | -------- | -------- | 28| content | string \| [Resource](ts-types.md#resource) | 否 | 文本内容。包含子组件Span且未设置[属性字符串](ts-universal-styled-string.md#属性字符串)时不生效，显示Span内容，并且此时text组件的样式不生效。<br/>默认值：' ' | 29| value<sup>11+</sup> | [TextOptions](#textoptions11) | 否 | 文本组件初始化选项。| 30 31## 属性 32 33除支持[通用属性](ts-component-general-attributes.md)，还支持以下属性： 34 35### textAlign 36 37textAlign(value: TextAlign) 38 39设置文本段落在水平方向的对齐方式。 40 41文本段落宽度占满Text组件宽度。 42 43可通过[align](ts-universal-attributes-location.md)属性控制文本段落在垂直方向上的位置，此组件中不可通过align属性控制文本段落在水平方向上的位置，即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同，控制内容在顶部，Alignment.Start、Alignment.Center、Alignment.End效果相同，控制内容垂直居中，Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd效果相同，控制内容在底部。结合TextAlign属性可控制内容在水平方向的位置。 44 45当textAlign属性设置为TextAlign.JUSTIFY时，需要根据文本内容设置[wordBreak](#wordbreak11)属性，且最后一行文本不参与两端对齐，为水平对齐首部效果。 46 47**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 48 49**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53**参数：** 54 55| 参数名 | 类型 | 必填 | 说明 | 56| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 57| value | [TextAlign](ts-appendix-enums.md#textalign) | 是 | 文本段落在水平方向的对齐方式。<br/>默认值：TextAlign.Start | 58 59### textOverflow 60 61textOverflow(value: { overflow: TextOverflow }) 62 63设置文本超长时的显示方式。 64 65文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。从API version 11开始，建议优先组合wordBreak属性设置为WordBreak.BREAK_ALL方式实现字母为单位进行截断，使用[示例4](#示例4设置文本断行及折行)。 66 67当overflow设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时，需配合maxLines使用，单独设置不生效。设置TextOverflow.None与TextOverflow.Clip效果一样。 68 69当overflow设置为TextOverflow.MARQUEE时，文本在一行内滚动显示，设置maxLines及copyOption属性均不生效。在文本不可滚动时，设置textAlign属性生效；在文本可滚动时，设置textAlign属性不生效。在跑马灯模式下，Text组件clip属性默认为true。属性字符串的[CustomSpan](ts-universal-styled-string.md#customspan)不支持跑马灯模式。 70 71从API version 12开始，当overflow设置为TextOverflow.MARQUEE时，支持ImageSpan组件，文本和图片在一行内滚动显示。 72 73**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 74 75**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 76 77**系统能力：** SystemCapability.ArkUI.ArkUI.Full 78 79**参数：** 80 81| 参数名 | 类型 | 必填 | 说明 | 82| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 83| value | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | 是 | 文本超长时的显示方式。<br/>默认值：{overflow: TextOverflow.Clip} | 84 85### maxLines 86 87maxLines(value: number) 88 89设置文本的最大行数。默认情况下，文本是自动折行的，如果指定此属性，则文本最多不会超过指定的行。如果有多余的文本，可以通过[textOverflow](#textoverflow)来指定截断方式。 90 91**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 92 93**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 94 95**系统能力：** SystemCapability.ArkUI.ArkUI.Full 96 97**参数：** 98 99| 参数名 | 类型 | 必填 | 说明 | 100| ------ | ------ | ---- | ---------------- | 101| value | number | 是 | 文本的最大行数。 | 102 103### lineHeight 104 105lineHeight(value: number | string | Resource) 106 107设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，number类型时单位为fp。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。 108 109**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 110 111**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 112 113**系统能力：** SystemCapability.ArkUI.ArkUI.Full 114 115**参数：** 116 117| 参数名 | 类型 | 必填 | 说明 | 118| ------ | ------------------------------------------------------------ | ---- | ---------------- | 119| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 文本的文本行高。 | 120 121### decoration 122 123decoration(value: DecorationStyleInterface) 124 125设置文本装饰线样式及其颜色。 126 127**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 128 129**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 130 131**系统能力：** SystemCapability.ArkUI.ArkUI.Full 132 133**参数：** 134 135| 参数名 | 类型 | 必填 | 说明 | 136| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 137| value | [DecorationStyleInterface<sup>12+</sup>](ts-universal-styled-string.md#decorationstyleinterface对象说明) | 是 | 文本装饰线样式对象。<br/>默认值：<br/>{<br/> type: TextDecorationType.None,<br/> color: Color.Black,<br/> style: TextDecorationStyle.SOLID <br/>}<br/>**说明：** <br/>style参数不支持卡片能力。 | 138 139### baselineOffset 140 141baselineOffset(value: number | string) 142 143设置文本基线的偏移量，设置该值为百分比时，按默认值显示。 144 145正数内容向上偏移，负数向下偏移。 146 147**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 148 149**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 150 151**系统能力：** SystemCapability.ArkUI.ArkUI.Full 152 153**参数：** 154 155| 参数名 | 类型 | 必填 | 说明 | 156| ------ | -------------------------- | ---- | -------------------------------- | 157| value | number \| string | 是 | 文本基线的偏移量。<br/>默认值：0 | 158 159### letterSpacing 160 161letterSpacing(value: number | string) 162 163设置文本字符间距。设置该值为百分比时，按默认值显示。设置该值为0时，按默认值显示。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。 164 165当取值为负值时，文字会发生压缩，负值过小时会将组件内容区大小压缩为0，导致无内容显示。 166 167**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 168 169**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 170 171**系统能力：** SystemCapability.ArkUI.ArkUI.Full 172 173**参数：** 174 175| 参数名 | 类型 | 必填 | 说明 | 176| ------ | -------------------------- | ---- | -------------- | 177| value | number \| string | 是 | 文本字符间距。<br/>单位：fp | 178 179### minFontSize 180 181minFontSize(value: number | string | Resource) 182 183设置文本最小显示字号。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。 184 185需配合[maxFontSize](#maxfontsize)以及[maxLines](#maxlines)或布局大小限制使用，单独设置不生效，对子组件和属性字符串不生效。 186 187自适应字号生效时，fontSize设置不生效。 188 189minFontSize小于或等于0时，自适应字号不生效，此时按照[fontSize](#fontsize)属性的值生效，未设置时按照其默认值生效。 190 191**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 192 193**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 194 195**系统能力：** SystemCapability.ArkUI.ArkUI.Full 196 197**参数：** 198 199| 参数名 | 类型 | 必填 | 说明 | 200| ------ | ------------------------------------------------------------ | ---- | ------------------ | 201| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 文本最小显示字号。<br/>单位：fp | 202 203### maxFontSize 204 205maxFontSize(value: number | string | Resource) 206 207设置文本最大显示字号。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。 208 209需配合[minFontSize](#minfontsize)以及[maxLines](#maxlines)或布局大小限制使用，单独设置不生效，对子组件和属性字符串不生效。 210 211自适应字号生效时，fontSize设置不生效。 212 213maxFontSize小于或等于0时，自适应字号不生效，此时按照[fontSize](#fontsize)属性的值生效，未设置时按照其默认值生效。 214 215**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 216 217**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 218 219**系统能力：** SystemCapability.ArkUI.ArkUI.Full 220 221**参数：** 222 223| 参数名 | 类型 | 必填 | 说明 | 224| ------ | ------------------------------------------------------------ | ---- | ------------------ | 225| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 文本最大显示字号。<br/>单位：fp | 226 227### textCase 228 229textCase(value: TextCase) 230 231设置文本大小写。 232 233**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 234 235**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 236 237**系统能力：** SystemCapability.ArkUI.ArkUI.Full 238 239**参数：** 240 241| 参数名 | 类型 | 必填 | 说明 | 242| ------ | ----------------------------------------- | ---- | ----------------------------------------- | 243| value | [TextCase](ts-appendix-enums.md#textcase) | 是 | 文本大小写。<br />默认值：TextCase.Normal | 244 245### fontColor 246 247fontColor(value: ResourceColor) 248 249设置字体颜色。 250 251**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 252 253**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 254 255**系统能力：** SystemCapability.ArkUI.ArkUI.Full 256 257**参数：** 258 259| 参数名 | 类型 | 必填 | 说明 | 260| ------ | ------------------------------------------ | ---- | ---------- | 261| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 字体颜色。 | 262 263### fontSize 264 265fontSize(value: number | string | Resource) 266 267设置字体大小。 268 269**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 270 271**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 272 273**系统能力：** SystemCapability.ArkUI.ArkUI.Full 274 275**参数：** 276 277| 参数名 | 类型 | 必填 | 说明 | 278| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 279| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 字体大小。fontSize为number类型时，使用fp单位。字体默认大小16fp。不支持设置百分比字符串。 | 280 281### fontStyle 282 283fontStyle(value: FontStyle) 284 285设置字体样式。 286 287**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 288 289**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 290 291**系统能力：** SystemCapability.ArkUI.ArkUI.Full 292 293**参数：** 294 295| 参数名 | 类型 | 必填 | 说明 | 296| ------ | ------------------------------------------- | ---- | --------------------------------------- | 297| value | [FontStyle](ts-appendix-enums.md#fontstyle) | 是 | 字体样式。<br/>默认值：FontStyle.Normal | 298 299### fontWeight 300 301fontWeight(value: number | FontWeight | string) 302 303设置文本的字体粗细，设置过大可能会在不同字体下有截断。 304 305**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 306 307**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 308 309**系统能力：** SystemCapability.ArkUI.ArkUI.Full 310 311**参数：** 312 313| 参数名 | 类型 | 必填 | 说明 | 314| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 315| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 是 | 文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。<br/>默认值：FontWeight.Normal | 316 317### fontFamily 318 319fontFamily(value: string | Resource) 320 321设置字体列表。 322 323**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 324 325**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 326 327**系统能力：** SystemCapability.ArkUI.ArkUI.Full 328 329**参数：** 330 331| 参数名 | 类型 | 必填 | 说明 | 332| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 333| value | string \| [Resource](ts-types.md#resource) | 是 | 字体列表。默认字体'HarmonyOS Sans'。<br>应用当前支持'HarmonyOS Sans'字体和[注册自定义字体](../js-apis-font.md)。<br>卡片当前仅支持'HarmonyOS Sans'字体。 | 334 335### copyOption<sup>9+</sup> 336 337copyOption(value: CopyOptions) 338 339设置组件是否支持文本可复制粘贴。设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，长按文本，会弹出文本选择菜单，可选中文本并进行复制、全选操作。 340 341由于卡片没有长按事件，此场景下长按文本，不会弹出文本选择菜单。 342 343**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 344 345**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 346 347**系统能力：** SystemCapability.ArkUI.ArkUI.Full 348 349**参数：** 350 351| 参数名 | 类型 | 必填 | 说明 | 352| ------ | ------------------------------------------------ | ---- | ---------------------------------------------------------- | 353| value | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 是 | 组件是否支持文本可复制粘贴。<br />默认值：CopyOptions.None | 354 355### draggable<sup>9+</sup> 356 357draggable(value: boolean) 358 359设置选中文本拖拽效果。 360 361不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用。 362 363需配合[CopyOptions](ts-appendix-enums.md#copyoptions9)一起使用，设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，并且draggable设置为true时，支持对选中文本的拖拽以及选中内容复制到输入框。 364 365**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 366 367**系统能力：** SystemCapability.ArkUI.ArkUI.Full 368 369**参数：** 370 371| 参数名 | 类型 | 必填 | 说明 | 372| ------ | ------- | ---- | ------------------------------------ | 373| value | boolean | 是 | 选中文本拖拽效果。<br/>默认值：false | 374 375### font<sup>10+</sup> 376 377font(value: Font) 378 379设置文本样式。包括字体大小、字体粗细、字体族和字体风格。 380 381**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 382 383**系统能力：** SystemCapability.ArkUI.ArkUI.Full 384 385**参数：** 386 387| 参数名 | 类型 | 必填 | 说明 | 388| ------ | ------- | ---- | ---------- | 389| value | [Font](ts-types.md#font) | 是 | 文本样式。 | 390 391### textShadow<sup>10+</sup> 392 393textShadow(value: ShadowOptions | Array<ShadowOptions>) 394 395设置文字阴影效果。 396 397不支持fill字段,不支持智能取色模式。 398 399从API version 11开始，该接口支持以数组形式入参，实现多重文字阴影。 400 401**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 402 403**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 404 405**系统能力：** SystemCapability.ArkUI.ArkUI.Full 406 407**参数：** 408 409| 参数名 | 类型 | 必填 | 说明 | 410| ------ | ------------------------------------------------------------ | ---- | -------------- | 411| value | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明) \| Array<[ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明)><sup>11+</sup> | 是 | 文字阴影效果。 | 412 413### heightAdaptivePolicy<sup>10+</sup> 414 415heightAdaptivePolicy(value: TextHeightAdaptivePolicy) 416 417设置文本自适应布局调整字号的方式。 418 419当设置为TextHeightAdaptivePolicy.MAX_LINES_FIRST时，优先使用[maxLines](#maxlines)属性来调整文本高度。如果使用maxLines属性的布局大小超过了布局约束，则尝试在[minFontSize](#minfontsize)和[maxFontSize](#maxfontsize)的范围内缩小字体以显示更多文本。 420 421当设置为TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST时，优先使用minFontSize属性来调整文本高度。如果使用minFontSize属性可以将文本布局在一行中，则尝试在minFontSize和maxFontSize的范围内增大字体并使用最大可能的字体大小在一行内显示，否则按minFontSize显示。 422 423当设置为TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST时，优先使用布局约束来调整文本高度。如果布局大小超过布局约束，则尝试在minFontSize和maxFontSize的范围内缩小字体以满足布局约束。如果将字体大小缩小到minFontSize后，布局大小仍然超过布局约束，则删除超过布局约束的行。 424 425**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 426 427**系统能力：** SystemCapability.ArkUI.ArkUI.Full 428 429**参数：** 430 431| 参数名 | 类型 | 必填 | 说明 | 432| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 433| value | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 是 | 文本自适应高度的方式。<br/>默认值：TextHeightAdaptivePolicy.MAX_LINES_FIRST | 434 435### textIndent<sup>10+</sup> 436 437textIndent(value: Length) 438 439设置首行文本缩进。 440 441**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 442 443**系统能力：** SystemCapability.ArkUI.ArkUI.Full 444 445**参数：** 446 447| 参数名 | 类型 | 必填 | 说明 | 448| ------ | ---------------------------- | ---- | ---------------------------- | 449| value | [Length](ts-types.md#length) | 是 | 首行文本缩进。<br/>默认值：0 | 450 451### wordBreak<sup>11+</sup> 452 453wordBreak(value: WordBreak) 454 455设置断行规则。WordBreak.BREAK_ALL与{overflow: TextOverflow.Ellipsis}，maxLines组合使用可实现英文单词按字母截断，超出部分以省略号显示 456 457**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 458 459**系统能力：** SystemCapability.ArkUI.ArkUI.Full 460 461**参数：** 462 463| 参数名 | 类型 | 必填 | 说明 | 464| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 465| value | [WordBreak](ts-appendix-enums.md#wordbreak11) | 是 | 断行规则。 <br />默认值：WordBreak.BREAK_WORD | 466 467### selection<sup>11+</sup> 468 469selection(selectionStart: number, selectionEnd: number) 470 471设置选中区域。选中区域高亮且显示手柄和文本选择菜单。 472 473当copyOption设置为CopyOptions.None时，设置selection属性不生效。 474 475当overflow设置为TextOverflow.MARQUEE时，设置selection属性不生效。 476 477当selectionStart大于等于selectionEnd时不选中。可选范围为[0, textSize],textSize为文本内容最大字符数，入参小于0处理为0，大于textSize处理为textSize。 478 479当selectionStart或selectionEnd在截断不可见区域时不选中。截断为false时超出父组件的文本选中区域生效。 480 481**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 482 483**系统能力：** SystemCapability.ArkUI.ArkUI.Full 484 485**参数：** 486 487| 参数名 | 类型 | 必填 | 说明 | 488| -------------- | ------ | ---- | ------------------------------------ | 489| selectionStart | number | 是 | 所选文本的起始位置。<br />默认值：-1 | 490| selectionEnd | number | 是 | 所选文本的结束位置。<br />默认值：-1 | 491 492### ellipsisMode<sup>11+</sup> 493 494ellipsisMode(value: EllipsisMode) 495 496设置省略位置。ellipsisMode属性需要配合overflow设置为TextOverflow.Ellipsis以及maxLines使用，单独设置ellipsisMode属性不生效。 497 498EllipsisMode.START和EllipsisMode.CENTER仅在单行超长文本生效。 499 500**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 501 502**系统能力：** SystemCapability.ArkUI.ArkUI.Full 503 504**参数：** 505 506| 参数名 | 类型 | 必填 | 说明 | 507| ------ | --------------------------------------------------- | ---- | ----------------------------------------- | 508| value | [EllipsisMode](ts-appendix-enums.md#ellipsismode11) | 是 | 省略位置。 <br />默认值：EllipsisMode.END | 509 510### enableDataDetector<sup>11+</sup> 511 512enableDataDetector(enable: boolean) 513 514设置是否进行文本特殊实体识别。 515 516该接口依赖设备底层应具有文本识别能力，否则设置不会生效。 517 518当enableDataDetector设置为true，同时不设置dataDetectorConfig属性时，默认识别所有类型的实体，所识别实体的color和decoration会被更改为如下样式： 519 520```ts 521color: '#ff007dff' 522decoration:{ 523 type: TextDecorationType.Underline, 524 color: '#ff007dff', 525 style: TextDecorationStyle.SOLID 526} 527``` 528 529触摸点击和鼠标右键点击实体，会根据实体类型弹出对应的实体操作菜单，鼠标左键点击实体会直接响应菜单的第一个选项。 530 531当overflow设置为TextOverflow.MARQUEE时，该功能不会生效。 532 533当copyOption设置为CopyOptions.None时，点击实体弹出的菜单没有选择文本、复制和翻译功能。当copyOption不为CopyOptions.None，且textSelectable设置为TextSelectableMode.UNSELECTABLE时，仍然具有实体复制功能，但没有选择文本功能。 534 535**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 536 537**系统能力：** SystemCapability.ArkUI.ArkUI.Full 538 539**参数：** 540 541| 参数名 | 类型 | 必填 | 说明 | 542| ------ | ------- | ---- | --------------------------------- | 543| enable | boolean | 是 | 使能文本识别。<br/>默认值： false | 544 545### dataDetectorConfig<sup>11+</sup> 546 547dataDetectorConfig(config: TextDataDetectorConfig) 548 549设置文本识别配置。 550 551需配合[enableDataDetector](#enabledatadetector11)一起使用，设置enableDataDetector为true时，dataDetectorConfig的配置才能生效。 552 553当有两个实体A、B重叠时，按以下规则保留实体： 554 5551. 若A ⊂ B，则保留B，反之则保留A。 556 5572. 当A ⊄ B且B ⊄ A时，若A.start < B.start，则保留A，反之则保留B。 558 559**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 560 561**系统能力：** SystemCapability.ArkUI.ArkUI.Full 562 563**参数：** 564 565| 参数名 | 类型 | 必填 | 说明 | 566| ------ | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 567| config | [TextDataDetectorConfig](ts-text-common.md#textdatadetectorconfig11对象说明) | 是 | 文本识别配置。| 568 569### bindSelectionMenu<sup>11+</sup> 570 571bindSelectionMenu(spanType: TextSpanType, content: CustomBuilder, responseType: TextResponseType, 572 options?: SelectionMenuOptions) 573 574设置自定义选择菜单。 575 576bindSelectionMenu长按响应时长为600ms，bindContextMenu长按响应时长为800ms，同时绑定且触发方式均为长按时，优先响应bindSelectionMenu。 577 578自定义菜单超长时，建议内部嵌套[Scroll](./ts-container-scroll.md)组件使用，避免键盘被遮挡。 579 580**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 581 582**系统能力：** SystemCapability.ArkUI.ArkUI.Full 583 584**参数：** 585 586| 参数名 | 类型 | 必填 | 说明 | 587| ------------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 588| spanType | [TextSpanType](#textspantype11枚举说明) | 是 | 选择菜单的类型。<br/>默认值：TextSpanType.TEXT | 589| content | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 选择菜单的内容。 | 590| responseType | [TextResponseType](#textresponsetype11枚举说明) | 是 | 选择菜单的响应类型。<br/>默认值：TextResponseType.LONG_PRESS | 591| options | [SelectionMenuOptions](ts-basic-components-richeditor.md#selectionmenuoptions10) | 否 | 选择菜单的选项。 | 592 593### fontFeature<sup>12+</sup> 594 595fontFeature(value: string) 596 597设置文字特性效果，比如数字等宽的特性。 598 599格式为：normal \| \<feature-tag-value\> 600 601\<feature-tag-value\>的格式为：\<string\> \[ \<integer\> \| on \| off ] 602 603\<feature-tag-value\>的个数可以有多个，中间用','隔开。 604 605例如，使用等宽数字的输入格式为："ss01" on。 606 607**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 608 609**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 610 611**系统能力：** SystemCapability.ArkUI.ArkUI.Full 612 613**参数：** 614 615| 参数名 | 类型 | 必填 | 说明 | 616| ------ | ------ | ---- | -------------- | 617| value | string | 是 | 文字特性效果。 | 618 619fontFeature属性列表<br/> 620 621 622设置 Font Feature 属性，Font Feature 是 OpenType 字体的高级排版能力，如支持连字、数字等宽等特性，一般用在自定义字体中，其能力需要字体本身支持。 623更多 Font Feature 能力介绍可参考 https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop 和 https://sparanoid.com/lab/opentype-features/ 624 625> **说明：** 626> 627> 不支持Text内同时存在文本内容和Span或ImageSpan子组件。如果同时存在，只显示Span或ImageSpan内的内容。 628> 629> 字体排版引擎会对开发者传入的宽度[width](ts-universal-attributes-size.md#width)进行向下取整，保证是整型像素后进行排版。如果字体排版引擎向上取整，可能会出现文字右侧被截断。 630> 631> 当多个Text组件在[Row](ts-container-row.md)容器内布局且没有设置具体的布局分配信息时，Text会以Row的最大尺寸进行布局。如果需要子组件主轴累加的尺寸不超过Row容器主轴的尺寸，可以设置[layoutWeight](ts-universal-attributes-size.md#layoutweight)或者是以[Flex](ts-universal-attributes-flex-layout.md)布局来约束子组件的主轴尺寸。 632 633### lineSpacing<sup>12+</sup> 634 635lineSpacing(value: LengthMetrics) 636 637设置文本的行间距，设置值不大于0时，取默认值0。 638 639**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 640 641**系统能力：** SystemCapability.ArkUI.ArkUI.Full 642 643**参数：** 644 645| 参数名 | 类型 | 必填 | 说明 | 646| ------ | ------------------------------------------------------------ | ---- | ---------------- | 647| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是 | 文本的行间距。默认值：0 | 648 649### privacySensitive<sup>12+</sup> 650 651privacySensitive(supported: boolean) 652 653设置是否支持卡片敏感隐私信息。 654 655**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 656 657**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 658 659**系统能力：** SystemCapability.ArkUI.ArkUI.Full 660 661**参数：** 662 663| 参数名 | 类型 | 必填 | 说明 | 664| --------- | ------- | ---- | ------------------------------------------------------------ | 665| supported | boolean | 是 | 是否支持卡片敏感隐私信息。<br/>默认值为false，当设置为true时，隐私模式下文字将被遮罩为横杠“-”样式。<br/>**说明：** <br/>设置null则不敏感。<br/>进入隐私模式需要[卡片框架支持](./ts-universal-attributes-obscured.md)。 | 666 667### lineBreakStrategy<sup>12+</sup> 668 669lineBreakStrategy(strategy: LineBreakStrategy) 670 671设置折行规则。该属性在wordBreak不等于breakAll的时候生效，不支持连词符。 672 673**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 674 675**系统能力：** SystemCapability.ArkUI.ArkUI.Full 676 677**参数：** 678 679| 参数名 | 类型 | 必填 | 说明 | 680| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 681| strategy | [LineBreakStrategy](ts-appendix-enums.md#linebreakstrategy12) | 是 | 文本的折行规则。 <br />默认值：LineBreakStrategy.GREEDY | 682 683### textSelectable<sup>12+</sup> 684 685textSelectable(mode: TextSelectableMode) 686 687设置是否支持文本可选择、可获焦以及Touch后能否获取焦点。 688 689**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 690 691**系统能力：** SystemCapability.ArkUI.ArkUI.Full 692 693**参数：** 694 695| 参数名 | 类型 | 必填 | 说明 | 696| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 697| mode | [TextSelectableMode](ts-appendix-enums.md#textselectablemode12) | 是 | 文本是否支持可选择、可获焦。 <br />默认值：TextSelectableMode.SELECTABLE_UNFOCUSABLE | 698 699### editMenuOptions<sup>12+</sup> 700 701editMenuOptions(editMenu: EditMenuOptions) 702 703设置自定义菜单扩展项，允许用户设置扩展项的文本内容、图标、回调方法。 704 705**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 706 707**系统能力：** SystemCapability.ArkUI.ArkUI.Full 708 709**参数：** 710 711| 参数名 | 类型 | 必填 | 说明 | 712| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 713| editMenu | [EditMenuOptions](ts-text-common.md#editmenuoptions) | 是 | 扩展菜单选项。 | 714 715### minFontScale<sup>12+</sup> 716 717minFontScale(scale: number | Resource) 718 719设置文本最小的字体缩放倍数。 720 721**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 722 723**系统能力：** SystemCapability.ArkUI.ArkUI.Full 724 725**参数：** 726 727| 参数名 | 类型 | 必填 | 说明 | 728| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 729| scale | number \| [Resource](ts-types.md#resource) | 是 | 文本最小的字体缩放倍数。<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置的值小于0时，按值为0处理，设置的值大于1，按值为1处理，异常值默认不生效。 | 730 731### maxFontScale<sup>12+</sup> 732 733maxFontScale(scale: number | Resource) 734 735设置文本最大的字体缩放倍数。 736 737**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 738 739**系统能力：** SystemCapability.ArkUI.ArkUI.Full 740 741**参数：** 742 743| 参数名 | 类型 | 必填 | 说明 | 744| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 745| scale | number \| [Resource](ts-types.md#resource) | 是 | 文本最大的字体缩放倍数。<br/>取值范围：[1, +∞)<br/>**说明：** <br/>设置的值小于1时，按值为1处理，异常值默认不生效。 | 746 747### halfLeading<sup>12+</sup> 748 749halfLeading(halfLeading: boolean) 750 751设置文本是否将行间距平分至行的顶部与底部。 752 753组件侧设置halfLeading优先级高于module.json5配置文件中的halfLeading配置项。 754 755**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 756 757**系统能力：** SystemCapability.ArkUI.ArkUI.Full 758 759**参数：** 760 761| 参数名 | 类型 | 必填 | 说明 | 762| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 763| halfLeading | boolean | 是 | 文本是否将行间距平分至行的顶部与底部。<br/>true表示将行间距平分至行的顶部与底部，false则不平分。<br/>默认值：false | 764 765### font<sup>12+</sup> 766 767font(fontValue: Font, options?: FontSettingOptions) 768 769设置文本样式，支持设置字体配置项。 770 771仅Text组件生效，其子组件不生效。 772 773**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 774 775**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 776 777**系统能力：** SystemCapability.ArkUI.ArkUI.Full 778 779**参数：** 780 781| 参数名 | 类型 | 必填 | 说明 | 782| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 783| fontValue | [Font](ts-types.md#font) | 是 | 设置文本样式。 | 784| options | [FontSettingOptions](ts-text-common.md#fontsettingoptions12对象说明) | 否 | 设置字体配置项。 | 785 786### fontWeight<sup>12+</sup> 787 788fontWeight(weight: number | FontWeight | string, options?: FontSettingOptions) 789 790设置文本字重，支持设置字体配置项。 791 792仅Text组件生效，其子组件不生效。 793 794**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 795 796**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 797 798**系统能力：** SystemCapability.ArkUI.ArkUI.Full 799 800**参数：** 801 802| 参数名 | 类型 | 必填 | 说明 | 803| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 804| weight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 是 | 设置文本字重。number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。 | 805| options | [FontSettingOptions](ts-text-common.md#fontsettingoptions12对象说明) | 否 | 设置字体配置项。 | 806 807### enableHapticFeedback<sup>13+</sup> 808 809enableHapticFeedback(isEnabled: boolean) 810 811设置是否开启触控反馈。 812 813**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 814 815**系统能力：** SystemCapability.ArkUI.ArkUI.Full 816 817**参数：** 818 819| 参数名 | 类型 | 必填 | 说明 | 820| ------ | ------- | ---- | ---------------------------------- | 821| isEnabled | boolean | 是 | 是否开启触控反馈。<br/>默认值：true | 822 823> **说明：** 824> 825> 开启触控反馈时，需要在工程的module.json5中配置requestPermissions字段开启振动权限，配置如下： 826> ```json 827> "requestPermissions": [ 828> { 829> "name": "ohos.permission.VIBRATE", 830> } 831> ] 832> ``` 833 834### caretColor<sup>14+</sup> 835 836caretColor(color: ResourceColor) 837 838设置文本框选中区域手柄颜色。 839 840**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 841 842**系统能力：** SystemCapability.ArkUI.ArkUI.Full 843 844**参数：** 845 846| 参数名 | 类型 | 必填 | 说明 | 847| ------ | ------------------------------------------ | ---- | -------------------------------------- | 848| color | [ResourceColor](ts-types.md#resourcecolor) | 是 | 文本选中手柄颜色。<br/>默认值：'#007DFF' | 849 850### selectedBackgroundColor<sup>14+</sup> 851 852selectedBackgroundColor(color: ResourceColor) 853 854设置文本选中底板颜色。如果未设置不透明度，默认为20%不透明度。 855 856**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 857 858**系统能力：** SystemCapability.ArkUI.ArkUI.Full 859 860**参数：** 861 862| 参数名 | 类型 | 必填 | 说明 | 863| ------ | ------------------------------------------ | ---- | ------------------------------------------ | 864| color | [ResourceColor](ts-types.md#resourcecolor) | 是 | 文本选中底板颜色。<br/>默认为20%不透明度。<br/>默认值：'#007DFF' | 865 866## TextSpanType<sup>11+</sup>枚举说明 867 868[Span](ts-basic-components-span.md)类型信息。 869 870**系统能力：** SystemCapability.ArkUI.ArkUI.Full 871 872| 名称 | 值 | 说明 | 873| -------- | ---- | -------- | 874| TEXT | 0 | Span为文字类型。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 875| IMAGE | 1 | Span为图像类型。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 876| MIXED | 2 | Span为图文混合类型。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 877| DEFAULT<sup>15+</sup> | 3 | 注册此类型菜单但未注册TEXT、IMAGE、MIXED菜单时，文字类型、图片类型、图文混合类型都会触发并显示此类型对应的菜单。<br/>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 878 879> **说明：** 880> 881> 菜单类型的匹配顺序如下。例如，用户长按文本时，根据以下规则查找： 882> 1. 查找是否注册了TextSpanType.TEXT、TextResponseType.LONG_PRESS菜单 883> 2. 查找是否注册了TextSpanType.TEXT、TextResponseType.DEFAULT菜单 884> 3. 查找是否注册了TextSpanType.DEFAULT、TextResponseType.LONG_PRESS菜单 885> 4. 查找是否注册了TextSpanType.DEFAULT、TextResponseType.DEFAULT菜单 886 887## TextResponseType<sup>11+</sup>枚举说明 888 889**系统能力：** SystemCapability.ArkUI.ArkUI.Full 890 891| 名称 | 值 | 说明 | 892| ---------- | --- | ------------- | 893| RIGHT_CLICK | 0 | 通过鼠标右键触发菜单弹出。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 894| LONG_PRESS | 1 | 通过长按触发菜单弹出。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 895| SELECT | 2 | 通过鼠标选中触发菜单弹出。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 896| DEFAULT<sup>15+</sup> | 3 | 注册此类型的菜单但未注册RIGHT_CLICK、LONG_PRESS、SELECT时，右键、长按、鼠标选中都会触发并显示此类型对应的菜单。<br/>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 897 898> **说明：** 899> 900> 菜单类型的匹配顺序如下。例如，用户长按文本时，根据以下规则查找： 901> 1. 查找是否注册了TextSpanType.TEXT、TextResponseType.LONG_PRESS菜单 902> 2. 查找是否注册了TextSpanType.TEXT、TextResponseType.DEFAULT菜单 903> 3. 查找是否注册了TextSpanType.DEFAULT、TextResponseType.LONG_PRESS菜单 904> 4. 查找是否注册了TextSpanType.DEFAULT、TextResponseType.DEFAULT菜单 905 906## 事件 907 908除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 909 910### onCopy<sup>11+</sup> 911 912onCopy(callback:(value: string) => void) 913 914长按文本内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。目前文本复制仅支持文本。 915 916**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 917 918**系统能力：** SystemCapability.ArkUI.ArkUI.Full 919 920**参数：** 921 922| 参数名 | 类型 | 必填 | 说明 | 923| ------ | ------ | ---- | ---------------- | 924| value | string | 是 | 复制的文本内容。 | 925 926### onTextSelectionChange<sup>11+</sup> 927 928onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void) 929 930文本选择的位置发生变化时，触发该回调。 931 932**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 933 934**系统能力：** SystemCapability.ArkUI.ArkUI.Full 935 936**参数：** 937 938| 参数名 | 类型 | 必填 | 说明 | 939| -------------- | ------ | ---- | -------------------- | 940| selectionStart | number | 是 | 所选文本的起始位置。 | 941| selectionEnd | number | 是 | 所选文本的结束位置。 | 942 943## TextOptions<sup>11+</sup> 944 945Text初始化参数。 946 947**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 948 949**系统能力：** SystemCapability.ArkUI.ArkUI.Full 950 951| 名称 | 类型 | 必填 | 说明 | 952| -------- | -------- | -------- | -------- | 953| controller | [TextController](#textcontroller11) | 是 | 文本控制器。 | 954 955## TextController<sup>11+</sup> 956 957Text组件的控制器。 958 959**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 960 961**系统能力：** SystemCapability.ArkUI.ArkUI.Full 962 963### 导入对象 964 965``` 966controller: TextController = new TextController() 967``` 968 969### closeSelectionMenu 970 971closeSelectionMenu(): void 972 973关闭自定义选择菜单或系统默认选择菜单。 974 975**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 976 977**系统能力：** SystemCapability.ArkUI.ArkUI.Full 978 979### setStyledString<sup>12+</sup> 980 981setStyledString(value: StyledString): void 982 983触发绑定或更新属性字符串。 984 985**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 986 987**系统能力：** SystemCapability.ArkUI.ArkUI.Full 988 989**参数：** 990 991| 参数名 | 类型 | 必填 | 说明 | 992| ----- | ------ | ---- | ------------------- | 993| value | [StyledString](ts-universal-styled-string.md#styledstring) | 是 | 属性字符串。<br/>**说明：** <br/>StyledString的子类[MutableStyledString](ts-universal-styled-string.md#mutablestyledstring)也可以作为入参值。 | 994 995### getLayoutManager<sup>12+</sup> 996 997getLayoutManager(): LayoutManager 998 999获取布局管理器对象。 1000 1001**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1002 1003**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1004 1005**返回值：** 1006 1007| 类型 | 说明 | 1008| ---------------------------------------- | ------- | 1009| [LayoutManager](ts-text-common.md#LayoutManager) | 布局管理器对象。 | 1010 1011## 示例 1012 1013### 示例1（设置文本布局） 1014该示例通过textAlign、lineHeight、baselineOffset、halfLeading属性展示了文本布局的效果。 1015```ts 1016// xxx.ets 1017@Extend(Text) 1018function style(TextAlign: TextAlign) { 1019 .textAlign(TextAlign) 1020 .fontSize(12) 1021 .border({ width: 1 }) 1022 .padding(10) 1023 .width('100%') 1024 .margin(5) 1025} 1026 1027@Entry 1028@Component 1029struct TextExample1 { 1030 @State changeTextAlignIndex: number = 0; 1031 @State changeDecorationIndex: number = 0; 1032 @State TextAlign: TextAlign[] = [TextAlign.Start, TextAlign.Center, TextAlign.End]; 1033 @State TextAlignStr: string[] = ['Start', 'Center', 'End']; 1034 @State TextDecorationType: TextDecorationType[] = 1035 [TextDecorationType.LineThrough, TextDecorationType.Overline, TextDecorationType.Underline]; 1036 @State TextDecorationTypeStr: string[] = ['LineThrough', 'Overline', 'Underline']; 1037 @State TextDecorationStyle: TextDecorationStyle[] = 1038 [TextDecorationStyle.SOLID, TextDecorationStyle.DOTTED, TextDecorationStyle.WAVY]; 1039 @State TextDecorationStyleStr: string[] = ['SOLID', 'DOTTED', 'WAVY']; 1040 1041 build() { 1042 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 1043 // 设置文本水平方向对齐方式 1044 // 单行文本 1045 Text('textAlign').fontSize(9).fontColor(0xCCCCCC) 1046 Text(`TextAlign set to ${this.TextAlignStr[this.changeTextAlignIndex]}.`) 1047 .style(this.TextAlign[this.changeTextAlignIndex]) 1048 1049 // 多行文本 1050 Text(`This is the text content with textAlign set to ${this.TextAlignStr[this.changeTextAlignIndex]}.`) 1051 .style(this.TextAlign[this.changeTextAlignIndex]) 1052 .margin(5) 1053 1054 Row() { 1055 Button('当前TextAlign类型：' + this.TextAlignStr[this.changeTextAlignIndex]).onClick(() => { 1056 this.changeTextAlignIndex++; 1057 if (this.changeTextAlignIndex > (this.TextAlignStr.length - 1)) { 1058 this.changeTextAlignIndex = 0; 1059 } 1060 }) 1061 }.justifyContent(FlexAlign.Center).width('100%') 1062 1063 // 设置文本行高 1064 Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) 1065 Text('This is the text with the line height set. This is the text with the line height set.') 1066 .style(TextAlign.Start) 1067 Text('This is the text with the line height set. This is the text with the line height set.') 1068 .style(TextAlign.Start) 1069 .lineHeight(20) 1070 1071 // 设置文本基线偏移 1072 Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC) 1073 Text('This is the text content with baselineOffset 0.') 1074 .baselineOffset(0) 1075 .style(TextAlign.Start) 1076 Text('This is the text content with baselineOffset 30.') 1077 .baselineOffset(30) 1078 .style(TextAlign.Start) 1079 Text('This is the text content with baselineOffset -20.') 1080 .baselineOffset(-20) 1081 .style(TextAlign.Start) 1082 1083 // 设置文本是否居中对齐 1084 Text('halfLeading').fontSize(9).fontColor(0xCCCCCC) 1085 Text("This is the text with the halfLeading set.") 1086 .lineHeight(60) 1087 .halfLeading(true) 1088 .style(TextAlign.Start) 1089 Text("This is the text without the halfLeading set.") 1090 .lineHeight(60) 1091 .halfLeading(false) 1092 .style(TextAlign.Start) 1093 }.height(600).width('100%').padding({ left: 35, right: 35, top: 35 }) 1094 } 1095} 1096``` 1097 1098 1099### 示例2（设置文本样式） 1100 1101该示例通过decoration、letterSpacing、textCase、fontFamily、textShadow、fontStyle、textIndent、fontWeight属性展示了不同样式的文本效果。 1102 1103```ts 1104@Extend(Text) 1105function style() { 1106 .font({ size: 12 }) 1107 .border({ width: 1 }) 1108 .padding(10) 1109 .width('100%') 1110 .margin(5) 1111} 1112 1113@Entry 1114@Component 1115struct TextExample2 { 1116 @State changeDecorationIndex: number = 0; 1117 @State TextDecorationType: TextDecorationType[] = 1118 [TextDecorationType.LineThrough, TextDecorationType.Overline, TextDecorationType.Underline]; 1119 @State TextDecorationTypeStr: string[] = ['LineThrough', 'Overline', 'Underline']; 1120 @State TextDecorationStyle: TextDecorationStyle[] = 1121 [TextDecorationStyle.SOLID, TextDecorationStyle.DOTTED, TextDecorationStyle.WAVY]; 1122 @State TextDecorationStyleStr: string[] = ['SOLID', 'DOTTED', 'WAVY']; 1123 1124 build() { 1125 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 1126 Text('decoration').fontSize(9).fontColor(0xCCCCCC) 1127 Text('This is the text content with the decoration set to LineThrough and the color set to Red.') 1128 .decoration({ 1129 type: this.TextDecorationType[this.changeDecorationIndex], 1130 color: Color.Red, 1131 style: this.TextDecorationStyle[this.changeDecorationIndex] 1132 }) 1133 .style() 1134 .margin(5) 1135 1136 Row() { 1137 Button('当前decoration类型：' + this.TextDecorationTypeStr[this.changeDecorationIndex] + ' & ' + 1138 this.TextDecorationStyleStr[this.changeDecorationIndex]).onClick(() => { 1139 this.changeDecorationIndex++; 1140 if (this.changeDecorationIndex > (this.TextDecorationTypeStr.length - 1)) { 1141 this.changeDecorationIndex = 0; 1142 } 1143 }) 1144 }.justifyContent(FlexAlign.Center).width('100%') 1145 1146 // 文本字符间距 1147 Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC) 1148 Text('This is the text content with letterSpacing 0.') 1149 .letterSpacing(0) 1150 .style() 1151 Text('This is the text content with letterSpacing 3.') 1152 .letterSpacing(3) 1153 .style() 1154 Text('This is the text content with letterSpacing -1.') 1155 .letterSpacing(-1) 1156 .style() 1157 1158 Text('textCase').fontSize(9).fontColor(0xCCCCCC) 1159 Text('This is the text content with textCase set to Normal.') 1160 .textCase(TextCase.Normal) 1161 .style() 1162 // 文本全小写展示 1163 Text('This is the text content with textCase set to LowerCase.') 1164 .textCase(TextCase.LowerCase) 1165 .style() 1166 // 文本全大写展示 1167 Text('This is the text content with textCase set to UpperCase.') 1168 .textCase(TextCase.UpperCase) 1169 .style() 1170 1171 Text('fontFamily').fontSize(9).fontColor(0xCCCCCC) 1172 // 设置字体列表 1173 Text('This is the text content with fontFamily') 1174 .style() 1175 .fontFamily('HarmonyOS Sans') 1176 1177 Text('textShadow').fontSize(9).fontColor(0xCCCCCC) 1178 // 设置文字阴影效果 1179 Text('textShadow') 1180 .style() 1181 .textAlign(TextAlign.Center) 1182 .fontSize(40) 1183 .textShadow({ 1184 radius: 10, 1185 color: Color.Black, 1186 offsetX: 0, 1187 offsetY: 0 1188 }) 1189 1190 Text('fontStyle').fontSize(9).fontColor(0xCCCCCC) 1191 // 设置字体样式 1192 Text('This is the text content with fontStyle set to Italic') 1193 .style() 1194 .fontStyle(FontStyle.Italic) 1195 Text('This is the text content with fontStyle set to Normal') 1196 .style() 1197 .fontStyle(FontStyle.Normal) 1198 1199 Text('textIndent').fontSize(9).fontColor(0xCCCCCC) 1200 // 设置文字缩进 1201 Text('This is the text content with textIndent 30') 1202 .style() 1203 .textIndent(30) 1204 1205 Text('fontWeight').fontSize(9).fontColor(0xCCCCCC) 1206 // 设置文本的字体粗细 1207 Text('This is the text content with fontWeight 800') 1208 .style() 1209 .fontWeight('800', { enableVariableFontWeight: true }) 1210 1211 }.width('100%').padding({ left: 35, right: 35 }) 1212 } 1213} 1214``` 1215 1216 1217### 示例3（设置文本超长省略） 1218 1219该示例通过maxLines、textOverflow、ellipsisMode属性展示了文本超长省略以及调整省略位置的效果。 1220 1221```ts 1222@Extend(Text) 1223function style() { 1224 .textAlign(TextAlign.Center) 1225 .fontSize(12) 1226 .border({ width: 1 }) 1227 .padding(10) 1228 .width('100%') 1229 .margin(5) 1230} 1231 1232@Entry 1233@Component 1234struct TextExample3 { 1235 @State text: string = 1236 'The text component is used to display a piece of textual information.Support universal attributes and universal text attributes.'; 1237 @State ellipsisModeIndex: number = 0; 1238 @State ellipsisMode: EllipsisMode[] = [EllipsisMode.START, EllipsisMode.CENTER, EllipsisMode.END]; 1239 @State ellipsisModeStr: string[] = ['START', 'CENTER', 'END']; 1240 1241 build() { 1242 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 1243 // 文本超长时显示方式 1244 Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC) 1245 // 超出maxLines截断内容展示 1246 Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.') 1247 .textOverflow({ overflow: TextOverflow.Clip }) 1248 .maxLines(1) 1249 .style() 1250 1251 // 超出maxLines展示省略号 1252 Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.') 1253 .textOverflow({ overflow: TextOverflow.Ellipsis }) 1254 .maxLines(1) 1255 .style() 1256 1257 Text('marquee').fontSize(9).fontColor(0xCCCCCC) 1258 // 设置文本超长时以跑马灯的方式展示 1259 Text('This is the text with the text overflow set marquee') 1260 .textOverflow({ overflow: TextOverflow.MARQUEE }) 1261 .style() 1262 1263 Text('ellipsisMode').fontSize(9).fontColor(0xCCCCCC) 1264 // 设置文本超长时省略号的位置 1265 Text(this.text) 1266 .textOverflow({ overflow: TextOverflow.Ellipsis }) 1267 .ellipsisMode(this.ellipsisMode[this.ellipsisModeIndex]) 1268 .maxLines(1) 1269 .style() 1270 1271 Row() { 1272 Button('更改省略号位置：' + this.ellipsisModeStr[this.ellipsisModeIndex]).onClick(() => { 1273 this.ellipsisModeIndex++; 1274 if (this.ellipsisModeIndex > (this.ellipsisModeStr.length - 1)) { 1275 this.ellipsisModeIndex = 0; 1276 } 1277 }) 1278 } 1279 }.height(600).width('100%').padding({ left: 35, right: 35, top: 35 }) 1280 } 1281} 1282``` 1283 1284 1285 1286### 示例4（设置文本断行及折行） 1287 1288该示例通过wordBreak、lineBreakStrategy、clip属性展示了文本在不同断行、折行规则下的效果以及文本超长时是否截断。 1289 1290```ts 1291// xxx.ets 1292@Extend(Text) 1293function style() { 1294 .fontSize(12) 1295 .border({ width: 1 }) 1296 .padding(10) 1297 .width('100%') 1298 .margin(5) 1299} 1300 1301@Entry 1302@Component 1303struct TextExample4 { 1304 @State text: string = 1305 'The text component is used to display a piece of textual information.Support universal attributes and universal text attributes.'; 1306 @State text2: string = 1307 "They can be classified as built-in components–those directly provided by the ArkUI framework and custom components – those defined by developers" + 1308 "The built-in components include buttons radio buttons progress indicators and text You can set the rendering effect of these components in method chaining mode," + 1309 "page components are divided into independent UI units to implement independent creation development and reuse of different units on pages making pages more engineering-oriented."; 1310 @State textClip: boolean = false; 1311 @State wordBreakIndex: number = 0; 1312 @State wordBreak: WordBreak[] = [WordBreak.NORMAL, WordBreak.BREAK_ALL, WordBreak.BREAK_WORD]; 1313 @State wordBreakStr: string[] = ['NORMAL', 'BREAK_ALL', 'BREAK_WORD']; 1314 @State lineBreakStrategyIndex: number = 0; 1315 @State lineBreakStrategy: LineBreakStrategy[] = 1316 [LineBreakStrategy.GREEDY, LineBreakStrategy.HIGH_QUALITY, LineBreakStrategy.BALANCED]; 1317 @State lineBreakStrategyStr: string[] = ['GREEDY', 'HIGH_QUALITY', 'BALANCED']; 1318 1319 build() { 1320 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 1321 Text('wordBreak').fontSize(9).fontColor(0xCCCCCC) 1322 // 设置文本断行规则 1323 Text(this.text) 1324 .maxLines(2) 1325 .textOverflow({ overflow: TextOverflow.Ellipsis }) 1326 .wordBreak(this.wordBreak[this.wordBreakIndex]) 1327 .style() 1328 1329 Row() { 1330 Button('当前wordBreak模式：' + this.wordBreakStr[this.wordBreakIndex]).onClick(() => { 1331 this.wordBreakIndex++; 1332 if (this.wordBreakIndex > (this.wordBreakStr.length - 1)) { 1333 this.wordBreakIndex = 0; 1334 } 1335 }) 1336 } 1337 1338 Text('clip').fontSize(9).fontColor(0xCCCCCC) 1339 // 设置文本是否超长截断 1340 Text('This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.') 1341 .wordBreak(WordBreak.NORMAL) 1342 .maxLines(2) 1343 .clip(this.textClip) 1344 .style() 1345 Row() { 1346 Button('切换clip：' + this.textClip).onClick(() => { 1347 this.textClip = !this.textClip; 1348 }) 1349 } 1350 1351 Text('lineBreakStrategy').fontSize(9).fontColor(0xCCCCCC) 1352 // 设置文本折行规则 1353 Text(this.text2) 1354 .lineBreakStrategy(this.lineBreakStrategy[this.lineBreakStrategyIndex]) 1355 .style() 1356 Row() { 1357 Button('当前lineBreakStrategy模式：' + this.lineBreakStrategyStr[this.lineBreakStrategyIndex]).onClick(() => { 1358 this.lineBreakStrategyIndex++; 1359 if (this.lineBreakStrategyIndex > (this.lineBreakStrategyStr.length - 1)) { 1360 this.lineBreakStrategyIndex = 0; 1361 } 1362 }) 1363 } 1364 }.height(600).width('100%').padding({ left: 35, right: 35, top: 35 }) 1365 } 1366} 1367``` 1368 1369 1370 1371### 示例5（设置文本选中和复制） 1372 1373该示例通过selection、onCopy、draggable、caretColor、selectedBackgroundColor接口展示了文本选中、触发复制回调、设置文本选中可拖拽以及修改手柄和选中颜色的效果。 1374 1375```ts 1376// xxx.ets 1377@Entry 1378@Component 1379struct TextExample5 { 1380 @State onCopy: string = ''; 1381 @State text: string = 1382 'This is set selection to Selection text content This is set selection to Selection text content.'; 1383 @State start: number = 0; 1384 @State end: number = 20; 1385 1386 build() { 1387 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { 1388 Text(this.text) 1389 .fontSize(12) 1390 .border({ width: 1 }) 1391 .lineHeight(20) 1392 .margin(30) 1393 .copyOption(CopyOptions.InApp) 1394 .selection(this.start, this.end) 1395 .onCopy((value: string) => { 1396 this.onCopy = value; 1397 }) 1398 .draggable(true) 1399 .caretColor(Color.Red) 1400 .selectedBackgroundColor(Color.Grey) 1401 .enableHapticFeedback(true) 1402 Button('Set text selection') 1403 .margin({ left: 20 }) 1404 .onClick(() => { 1405 // 变更文本选中起始点、终点 1406 this.start = 10; 1407 this.end = 30; 1408 }) 1409 Text(this.onCopy).fontSize(12).margin(10).key('copy') 1410 }.height(600).width(335).padding({ left: 35, right: 35, top: 35 }) 1411 } 1412} 1413``` 1414 1415 1416### 示例6（设置文本自适应和缩放倍数限制范围） 1417 1418该示例通过heightAdaptivePolicy属性展示文本自适应效果以及通过minFontScale、maxFontScale展示设置字体缩放倍数限制范围。 1419 1420```ts 1421// xxx.ets 1422@Extend(Text) 1423function style(HeightAdaptivePolicy: TextHeightAdaptivePolicy) { 1424 .width('80%') 1425 .height(90) 1426 .borderWidth(1) 1427 .minFontSize(10) 1428 .maxFontSize(30) 1429 .maxLines(2) 1430 .margin(5) 1431 .textOverflow({ overflow: TextOverflow.Ellipsis }) 1432 .heightAdaptivePolicy(HeightAdaptivePolicy) 1433} 1434 1435@Entry 1436@Component 1437struct TextExample6 { 1438 build() { 1439 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 1440 // 设置文本自适应高度的方式 1441 Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC) 1442 Text('This is the text with the height adaptive policy set.') 1443 .style(TextHeightAdaptivePolicy.MAX_LINES_FIRST) 1444 Text('This is the text with the height adaptive policy set.') 1445 .style(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST) 1446 Text('This is the text with the height adaptive policy set.') 1447 .style(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST) 1448 1449 Text('fontScale').fontSize(9).fontColor(0xCCCCCC) 1450 Text('This is the text content with minFontScale set to 1 and maxFontScale set to 1.2') 1451 .style(TextHeightAdaptivePolicy.MAX_LINES_FIRST) 1452 .minFontScale(1) 1453 .maxFontScale(1.2) 1454 }.height(600).width('100%').padding({ left: 35, right: 35, top: 35 }) 1455 } 1456} 1457``` 1458 1459 1460 1461### 示例7（设置文本识别） 1462 1463该示例通过enableDataDetector、dataDetectorConfig接口实现了文本识别的功能。 1464 1465```ts 1466// xxx.ets 1467@Entry 1468@Component 1469struct TextExample7 { 1470 @State phoneNumber: string = '(86) (755) ********'; 1471 @State url: string = 'www.********.com'; 1472 @State email: string = '***@example.com'; 1473 @State address: string = 'XX省XX市XX区XXXX'; 1474 @State datetime: string = 'XX年XX月XX日XXXX'; 1475 @State enableDataDetector: boolean = true; 1476 @State types: TextDataDetectorType[] = []; 1477 1478 build() { 1479 Row() { 1480 Column() { 1481 Text( 1482 '电话号码：' + this.phoneNumber + '\n' + 1483 '链接：' + this.url + '\n' + 1484 '邮箱：' + this.email + '\n' + 1485 '地址：' + this.address + '\n' + 1486 '时间：' + this.datetime 1487 ) 1488 .fontSize(16) 1489 .copyOption(CopyOptions.InApp) 1490 .enableDataDetector(this.enableDataDetector) 1491 .dataDetectorConfig({ 1492 types: this.types, onDetectResultUpdate: (result: string) => { 1493 } 1494 }) 1495 .textAlign(TextAlign.Center) 1496 .borderWidth(1) 1497 .padding(10) 1498 .width('100%') 1499 } 1500 .width('100%') 1501 } 1502 .height('100%') 1503 } 1504} 1505``` 1506 1507 1508 1509### 示例8（文本绑定自定义菜单） 1510 1511该示例通过bindSelectionMenu、onTextSelectionChange、closeSelectionMenu接口实现了文本绑定自定义菜单的功能。 1512 1513```ts 1514// xxx.ets 1515@Entry 1516@Component 1517struct TextExample8 { 1518 controller: TextController = new TextController(); 1519 options: TextOptions = { controller: this.controller }; 1520 1521 build() { 1522 Column() { 1523 Column() { 1524 Text(undefined, this.options) { 1525 Span('Hello World') 1526 ImageSpan($r('app.media.icon')) 1527 .width('100px') 1528 .height('100px') 1529 .objectFit(ImageFit.Fill) 1530 .verticalAlign(ImageSpanAlignment.CENTER) 1531 } 1532 .copyOption(CopyOptions.InApp) 1533 .bindSelectionMenu(TextSpanType.IMAGE, this.LongPressImageCustomMenu, TextResponseType.LONG_PRESS, { 1534 onDisappear: () => { 1535 console.info(`自定义选择菜单关闭时回调`); 1536 }, 1537 onAppear: () => { 1538 console.info(`自定义选择菜单弹出时回调`); 1539 } 1540 }) 1541 .bindSelectionMenu(TextSpanType.TEXT, this.RightClickTextCustomMenu, TextResponseType.RIGHT_CLICK) 1542 .bindSelectionMenu(TextSpanType.MIXED, this.SelectMixCustomMenu, TextResponseType.SELECT) 1543 .onTextSelectionChange((selectionStart: number, selectionEnd: number) => { 1544 console.info(`文本选中区域变化回调, selectionStart: ${selectionStart}, selectionEnd: ${selectionEnd}`); 1545 }) 1546 .borderWidth(1) 1547 .borderColor(Color.Red) 1548 .width(200) 1549 .height(100) 1550 } 1551 .width('100%') 1552 .backgroundColor(Color.White) 1553 .alignItems(HorizontalAlign.Start) 1554 .padding(25) 1555 } 1556 .height('100%') 1557 } 1558 1559 @Builder 1560 RightClickTextCustomMenu() { 1561 Column() { 1562 Menu() { 1563 MenuItemGroup() { 1564 MenuItem({ startIcon: $r('app.media.app_icon'), content: "Right Click Menu 1", labelInfo: "" }) 1565 .onClick((event) => { 1566 this.controller.closeSelectionMenu(); 1567 }) 1568 MenuItem({ startIcon: $r('app.media.app_icon'), content: "Right Click Menu 2", labelInfo: "" }) 1569 MenuItem({ startIcon: $r('app.media.app_icon'), content: "Right Click Menu 3", labelInfo: "" }) 1570 } 1571 } 1572 .MenuStyles() 1573 } 1574 } 1575 1576 @Builder 1577 LongPressImageCustomMenu() { 1578 Column() { 1579 Menu() { 1580 MenuItemGroup() { 1581 MenuItem({ startIcon: $r('app.media.app_icon'), content: "Long Press Image Menu 1", labelInfo: "" }) 1582 .onClick((event) => { 1583 this.controller.closeSelectionMenu(); 1584 }) 1585 MenuItem({ startIcon: $r('app.media.app_icon'), content: "Long Press Image Menu 2", labelInfo: "" }) 1586 MenuItem({ startIcon: $r('app.media.app_icon'), content: "Long Press Image Menu 3", labelInfo: "" }) 1587 } 1588 } 1589 .MenuStyles() 1590 } 1591 } 1592 1593 @Builder 1594 SelectMixCustomMenu() { 1595 Column() { 1596 Menu() { 1597 MenuItemGroup() { 1598 MenuItem({ startIcon: $r('app.media.app_icon'), content: "Select Mixed Menu 1", labelInfo: "" }) 1599 .onClick((event) => { 1600 this.controller.closeSelectionMenu(); 1601 }) 1602 MenuItem({ startIcon: $r('app.media.app_icon'), content: "Select Mixed Menu 2", labelInfo: "" }) 1603 MenuItem({ startIcon: $r('app.media.app_icon'), content: "Select Mixed Menu 3", labelInfo: "" }) 1604 } 1605 } 1606 .MenuStyles() 1607 } 1608 } 1609} 1610 1611@Extend(Menu) 1612function MenuStyles() { 1613 .radius($r('sys.float.ohos_id_corner_radius_card')) 1614 .clip(true) 1615 .backgroundColor('#F0F0F0') 1616} 1617``` 1618 1619 1620 1621### 示例9（设置文本特性与行间距） 1622 1623该示例通过fontFeature、lineSpacing接口展示了设置文本特性与行间距的效果。 1624 1625```ts 1626// xxx.ets 1627import { LengthMetrics } from '@kit.ArkUI' 1628 1629@Extend(Text) 1630function style() { 1631 .fontSize(12) 1632 .border({ width: 1 }) 1633 .width('100%') 1634} 1635 1636@Entry 1637@Component 1638struct TextExample9 { 1639 build() { 1640 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 1641 Text('lineSpacing').fontSize(9).fontColor(0xCCCCCC) 1642 // 设置文本行间距 1643 Text('This is a context with no lineSpacing set.') 1644 .lineSpacing(undefined) 1645 .style() 1646 Text('This is a context with lineSpacing set to 20_px.') 1647 .lineSpacing(LengthMetrics.px(20)) 1648 .style() 1649 Text('This is the context with lineSpacing set to 20_vp.') 1650 .lineSpacing(LengthMetrics.vp(20)) 1651 .style() 1652 Text('This is the context with lineSpacing set to 20_fp.') 1653 .lineSpacing(LengthMetrics.fp(20)) 1654 .style() 1655 Text('This is the context with lineSpacing set to 20_lpx.') 1656 .lineSpacing(LengthMetrics.lpx(20)) 1657 .style() 1658 Text('This is the context with lineSpacing set to 100%.') 1659 .lineSpacing(LengthMetrics.percent(1)) 1660 .style() 1661 1662 Text('fontFeature').fontSize(9).fontColor(0xCCCCCC) 1663 // 设置文本特性 1664 Text('This is ss01 on : 0123456789') 1665 .fontFeature("\"ss01\" on") 1666 .style() 1667 Text('This is ss01 off: 0123456789') 1668 .fontFeature("\"ss01\" off") 1669 .style() 1670 }.height(300).width(350).padding({ left: 35, right: 35, top: 35 }) 1671 } 1672} 1673``` 1674 1675 1676 1677### 示例10（获取文本信息） 1678 1679该示例通过getLayoutManager接口调用文本的布局管理对象获取文本信息。 1680 1681```ts 1682// xxx.ets 1683import { text } from '@kit.ArkGraphics2D' 1684 1685@Entry 1686@Component 1687struct TextExample10 { 1688 @State lineCount: string = ""; 1689 @State glyphPositionAtCoordinate: string = ""; 1690 @State lineMetrics: string = ""; 1691 @State rectsForRangeStr: string = ""; 1692 controller: TextController = new TextController(); 1693 @State textStr: string = 1694 'Hello World! 您好，世界！'; 1695 1696 build() { 1697 Scroll() { 1698 Column() { 1699 Text('Text组件getLayoutManager接口获取段落相对组件的信息') 1700 .fontSize(15) 1701 .fontColor(0xCCCCCC) 1702 .width('90%') 1703 .padding(10) 1704 Text(this.textStr, { controller: this.controller }) 1705 .fontSize(25) 1706 .borderWidth(1) 1707 .onAreaChange(() => { 1708 let layoutManager: LayoutManager = this.controller.getLayoutManager(); 1709 this.lineCount = "LineCount: " + layoutManager.getLineCount(); 1710 }) 1711 1712 Text('LineCount').fontSize(15).fontColor(0xCCCCCC).width('90%').padding(10) 1713 Text(this.lineCount) 1714 1715 Text('GlyphPositionAtCoordinate').fontSize(15).fontColor(0xCCCCCC).width('90%').padding(10) 1716 Button("相对组件坐标[150,50]字形信息") 1717 .onClick(() => { 1718 let layoutManager: LayoutManager = this.controller.getLayoutManager(); 1719 let position: PositionWithAffinity = layoutManager.getGlyphPositionAtCoordinate(150, 50); 1720 this.glyphPositionAtCoordinate = 1721 "相对组件坐标[150,50] glyphPositionAtCoordinate position: " + position.position + " affinity: " + 1722 position.affinity; 1723 }) 1724 .margin({ bottom: 20, top: 10 }) 1725 Text(this.glyphPositionAtCoordinate) 1726 1727 Text('LineMetrics').fontSize(15).fontColor(0xCCCCCC).width('90%').padding(10) 1728 Button("首行行信息、文本样式信息、以及字体属性信息") 1729 .onClick(() => { 1730 let layoutManager: LayoutManager = this.controller.getLayoutManager(); 1731 let lineMetrics: LineMetrics = layoutManager.getLineMetrics(0); 1732 this.lineMetrics = "lineMetrics is " + JSON.stringify(lineMetrics) + "\n\n"; 1733 let runMetrics = lineMetrics.runMetrics; 1734 runMetrics.forEach((value, key) => { 1735 this.lineMetrics += "runMetrics key is " + key + " " + JSON.stringify(value) + "\n\n"; 1736 }) 1737 }) 1738 .margin({ bottom: 20, top: 10 }) 1739 Text(this.lineMetrics) 1740 1741 Text('getRectsForRange').fontSize(15).fontColor(0xCCCCCC).width('90%').padding(10) 1742 Button("获取指定矩形宽度和高度下，文本中任意区间范围内字符或占位符的绘制区域信息") 1743 .onClick(() => { 1744 let layoutManager: LayoutManager = this.controller.getLayoutManager(); 1745 let range: TextRange = { start: 0, end: 1 }; 1746 let rectsForRangeInfo: text.TextBox[] = 1747 layoutManager.getRectsForRange(range, text.RectWidthStyle.TIGHT, text.RectHeightStyle.TIGHT); 1748 this.rectsForRangeStr = "getRectsForRange result is " + "\n\n"; 1749 rectsForRangeInfo.forEach((value, key) => { 1750 this.rectsForRangeStr += "rectsForRange key is " + key + " " + JSON.stringify(value) + "\n\n"; 1751 }) 1752 }) 1753 .margin({ bottom: 20, top: 10 }) 1754 Text(this.rectsForRangeStr) 1755 } 1756 .margin({ top: 100, left: 8, right: 8 }) 1757 } 1758 } 1759} 1760``` 1761 1762 1763 1764### 示例11（实现键盘框选文本） 1765 1766该示例通过textSelectable属性实现了设置TextSelectMode.SELECTABLE_FOCUSABLE属性时能够触发键盘框选文本功能。 1767 1768```ts 1769// xxx.ets 1770@Entry 1771@Component 1772struct TextExample11 { 1773 @State message: string = 1774 'TextTextTextTextTextTextTextText' + 'TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText'; 1775 1776 build() { 1777 Column() { 1778 Text(this.message) 1779 .width(300) 1780 .height(100) 1781 .maxLines(5) 1782 .fontColor(Color.Black) 1783 .copyOption(CopyOptions.InApp) 1784 .selection(3, 8) 1785 .textSelectable(TextSelectableMode.SELECTABLE_FOCUSABLE) 1786 }.width('100%').margin({ top: 100 }) 1787 } 1788} 1789``` 1790 1791 1792 1793### 示例12（文本扩展自定义菜单） 1794 1795该示例通过editMenuOptions接口实现了文本设置自定义菜单扩展项的文本内容、图标以及回调的功能。 1796 1797```ts 1798// xxx.ets 1799@Entry 1800@Component 1801struct TextExample12 { 1802 @State text: string = 'Text editMenuOptions' 1803 onCreateMenu = (menuItems: Array<TextMenuItem>) => { 1804 let item1: TextMenuItem = { 1805 content: 'custom1', 1806 icon: $r('app.media.startIcon'), 1807 id: TextMenuItemId.of('custom1'), 1808 }; 1809 let item2: TextMenuItem = { 1810 content: 'custom2', 1811 id: TextMenuItemId.of('custom2'), 1812 icon: $r('app.media.startIcon'), 1813 }; 1814 menuItems.push(item1); 1815 menuItems.unshift(item2); 1816 return menuItems; 1817 } 1818 onMenuItemClick = (menuItem: TextMenuItem, textRange: TextRange) => { 1819 if (menuItem.id.equals(TextMenuItemId.of("custom2"))) { 1820 console.log("拦截 id: custom2 start:" + textRange.start + "; end:" + textRange.end); 1821 return true; 1822 } 1823 if (menuItem.id.equals(TextMenuItemId.COPY)) { 1824 console.log("拦截 COPY start:" + textRange.start + "; end:" + textRange.end); 1825 return true; 1826 } 1827 if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) { 1828 console.log("不拦截 SELECT_ALL start:" + textRange.start + "; end:" + textRange.end); 1829 return false; 1830 } 1831 return false; 1832 }; 1833 @State editMenuOptions: EditMenuOptions = { 1834 onCreateMenu: this.onCreateMenu, onMenuItemClick: this.onMenuItemClick 1835 }; 1836 1837 build() { 1838 Column() { 1839 Text(this.text) 1840 .fontSize(20) 1841 .copyOption(CopyOptions.LocalDevice) 1842 .editMenuOptions(this.editMenuOptions) 1843 .margin({ top: 100 }) 1844 } 1845 .width("90%") 1846 .margin("5%") 1847 } 1848} 1849``` 1850 1851 1852 1853### 示例13（配置隐私隐藏） 1854 1855该示例通过privacySensitive属性展示了文本如何配置隐私隐藏的效果，实际显示需要卡片框架支持。 1856 1857```ts 1858// xxx.ets 1859@Entry 1860@Component 1861struct TextExample13 { 1862 build() { 1863 Column({ space: 10 }) { 1864 Text("privacySensitive") 1865 .privacySensitive(true) 1866 .margin({ top: 30 }) 1867 } 1868 .alignItems(HorizontalAlign.Center) 1869 .width("100%") 1870 } 1871} 1872``` 1873 1874
