• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 文本显示 (Text/Span)
2
3
4Text是文本组件，通常用于展示用户视图，如显示文章的文字。具体用法请参考[Text](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md)。
5
6
7## 创建文本
8
9Text可通过以下两种方式来创建：
10
11
12- string字符串
13
14  ```ts
15  Text('我是一段文本')
16  ```
17
18
19![zh-cn_image_0000001563060685](figures/zh-cn_image_0000001563060685.png)
20
21
22- 引用Resource资源
23
24  资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json。
25
26
27  ```ts
28  Text($r('app.string.module_desc'))
29    .baselineOffset(0)
30    .fontSize(30)
31    .border({ width: 1 })
32    .padding(10)
33    .width(300)
34  ```
35
36  ![zh-cn_image_0000001511580872](figures/zh-cn_image_0000001511580872.png)
37
38
39## 添加子组件
40
41[Span](../reference/apis-arkui/arkui-ts/ts-basic-components-span.md)只能作为[Text](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md)和[RichEditor](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md)组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。
42
43- 创建Span。
44
45  Span组件需要写到Text组件内，单独写Span组件不会显示信息，Text与Span同时配置文本内容时，Span内容覆盖Text内容。
46
47
48  ```ts
49  Text('我是Text') {
50    Span('我是Span')
51  }
52  .padding(10)
53  .borderWidth(1)
54  ```
55
56  ![zh-cn_image_0000001562700441](figures/zh-cn_image_0000001562700441.png)
57
58- 设置文本装饰线及颜色。
59
60  通过decoration设置文本装饰线及颜色。
61
62
63  ```ts
64  Text() {
65    Span('我是Span1，').fontSize(16).fontColor(Color.Grey)
66      .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
67    Span('我是Span2').fontColor(Color.Blue).fontSize(16)
68      .fontStyle(FontStyle.Italic)
69      .decoration({ type: TextDecorationType.Underline, color: Color.Black })
70    Span('，我是Span3').fontSize(16).fontColor(Color.Grey)
71      .decoration({ type: TextDecorationType.Overline, color: Color.Green })
72  }
73  .borderWidth(1)
74  .padding(10)
75  ```
76
77  ![zh-cn_image_0000001562700437](figures/zh-cn_image_0000001562700437.png)
78
79- 通过textCase设置文字一直保持大写或者小写状态。
80
81  ```ts
82  Text() {
83    Span('I am Upper-span').fontSize(12)
84      .textCase(TextCase.UpperCase)
85  }
86  .borderWidth(1)
87  .padding(10)
88  ```
89
90  ![zh-cn_image_0000001562940525](figures/zh-cn_image_0000001562940525.png)
91
92- 添加事件。
93
94  由于Span组件无尺寸信息，事件仅支持添加点击事件onClick。
95
96
97  ```ts
98  Text() {
99    Span('I am Upper-span').fontSize(12)
100      .textCase(TextCase.UpperCase)
101      .onClick(()=>{
102        console.info('我是Span——onClick')
103      })
104  }
105  ```
106
107
108## 自定义文本样式
109
110- 通过textAlign属性设置文本对齐样式。
111
112  ```ts
113  Text('左对齐')
114    .width(300)
115    .textAlign(TextAlign.Start)
116    .border({ width: 1 })
117    .padding(10)
118  Text('中间对齐')
119    .width(300)
120    .textAlign(TextAlign.Center)
121    .border({ width: 1 })
122    .padding(10)
123  Text('右对齐')
124    .width(300)
125    .textAlign(TextAlign.End)
126    .border({ width: 1 })
127    .padding(10)
128  ```
129
130  ![zh-cn_image_0000001511421260](figures/zh-cn_image_0000001511421260.png)
131
132- 通过textOverflow属性控制文本超长处理，textOverflow需配合maxLines一起使用（默认情况下文本自动折行）。
133
134  ```ts
135  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.')
136    .width(250)
137    .textOverflow({ overflow: TextOverflow.None })
138    .maxLines(1)
139    .fontSize(12)
140    .border({ width: 1 })
141    .padding(10)
142  Text('我是超长文本，超出的部分显示省略号。I am an extra long text, with ellipses displayed for any excess。')
143    .width(250)
144    .textOverflow({ overflow: TextOverflow.Ellipsis })
145    .maxLines(1)
146    .fontSize(12)
147    .border({ width: 1 })
148    .padding(10)
149  Text('当文本溢出其尺寸时，文本将滚动显示。When the text overflows its dimensions, the text will scroll for displaying.')
150    .width(250)
151    .textOverflow({ overflow: TextOverflow.MARQUEE })
152    .maxLines(1)
153    .fontSize(12)
154    .border({ width: 1 })
155    .padding(10)
156  ```
157
158  ![zh-cn_image_0000001563060701](figures/zh-cn_image_0000001563060701.gif)
159
160- 通过lineHeight属性设置文本行高。
161
162  ```ts
163  Text('This is the text with the line height set. This is the text with the line height set.')
164    .width(300).fontSize(12).border({ width: 1 }).padding(10)
165  Text('This is the text with the line height set. This is the text with the line height set.')
166    .width(300).fontSize(12).border({ width: 1 }).padding(10)
167    .lineHeight(20)
168  ```
169
170  ![zh-cn_image_0000001511740480](figures/zh-cn_image_0000001511740480.png)
171
172- 通过decoration属性设置文本装饰线样式及其颜色。
173
174  ```ts
175  Text('This is the text')
176    .decoration({
177      type: TextDecorationType.LineThrough,
178      color: Color.Red
179    })
180    .borderWidth(1).padding(10).margin(5)
181  Text('This is the text')
182    .decoration({
183      type: TextDecorationType.Overline,
184      color: Color.Red
185    })
186    .borderWidth(1).padding(10).margin(5)
187  Text('This is the text')
188    .decoration({
189      type: TextDecorationType.Underline,
190      color: Color.Red
191    })
192    .borderWidth(1).padding(10).margin(5)
193  ```
194
195  ![zh-cn_image_0000001511580888](figures/zh-cn_image_0000001511580888.png)
196
197- 通过baselineOffset属性设置文本基线的偏移量。
198
199  ```ts
200  Text('This is the text content with baselineOffset 0.')
201    .baselineOffset(0)
202    .fontSize(12)
203    .border({ width: 1 })
204    .padding(10)
205    .width('100%')
206    .margin(5)
207  Text('This is the text content with baselineOffset 30.')
208    .baselineOffset(30)
209    .fontSize(12)
210    .border({ width: 1 })
211    .padding(10)
212    .width('100%')
213    .margin(5)
214
215  Text('This is the text content with baselineOffset -20.')
216    .baselineOffset(-20)
217    .fontSize(12)
218    .border({ width: 1 })
219    .padding(10)
220    .width('100%')
221    .margin(5)
222  ```
223
224  ![zh-cn_image_0000001562820789](figures/zh-cn_image_0000001562820789.png)
225
226- 通过letterSpacing属性设置文本字符间距。
227
228  ```ts
229  Text('This is the text content with letterSpacing 0.')
230    .letterSpacing(0)
231    .fontSize(12)
232    .border({ width: 1 })
233    .padding(10)
234    .width('100%')
235    .margin(5)
236  Text('This is the text content with letterSpacing 3.')
237    .letterSpacing(3)
238    .fontSize(12)
239    .border({ width: 1 })
240    .padding(10)
241    .width('100%')
242    .margin(5)
243  Text('This is the text content with letterSpacing -1.')
244    .letterSpacing(-1)
245    .fontSize(12)
246    .border({ width: 1 })
247    .padding(10)
248    .width('100%')
249    .margin(5)
250  ```
251
252  ![zh-cn_image_0000001562940513](figures/zh-cn_image_0000001562940513.png)
253
254- 通过minFontSize与maxFontSize自适应字体大小，minFontSize设置文本最小显示字号，maxFontSize设置文本最大显示字号，minFontSize与maxFontSize必须搭配同时使用，以及需配合maxline或布局大小限制一起使用，单独设置不生效。
255
256  ```ts
257  Text('我的最大字号为30，最小字号为5，宽度为250，maxLines为1')
258    .width(250)
259    .maxLines(1)
260    .maxFontSize(30)
261    .minFontSize(5)
262    .border({ width: 1 })
263    .padding(10)
264    .margin(5)
265  Text('我的最大字号为30，最小字号为5，宽度为250，maxLines为2')
266    .width(250)
267    .maxLines(2)
268    .maxFontSize(30)
269    .minFontSize(5)
270    .border({ width: 1 })
271    .padding(10)
272    .margin(5)
273  Text('我的最大字号为30，最小字号为15，宽度为250,高度为50')
274    .width(250)
275    .height(50)
276    .maxFontSize(30)
277    .minFontSize(15)
278    .border({ width: 1 })
279    .padding(10)
280    .margin(5)
281  Text('我的最大字号为30，最小字号为15，宽度为250,高度为100')
282    .width(250)
283    .height(100)
284    .maxFontSize(30)
285    .minFontSize(15)
286    .border({ width: 1 })
287    .padding(10)
288    .margin(5)
289  ```
290
291  ![zh-cn_image_0000001511740472](figures/zh-cn_image_0000001511740472.png)
292
293- 通过textCase属性设置文本大小写。
294
295  ```ts
296  Text('This is the text content with textCase set to Normal.')
297    .textCase(TextCase.Normal)
298    .padding(10)
299    .border({ width: 1 })
300    .padding(10)
301    .margin(5)
302
303  // 文本全小写展示
304  Text('This is the text content with textCase set to LowerCase.')
305    .textCase(TextCase.LowerCase)
306    .border({ width: 1 })
307    .padding(10)
308    .margin(5)
309
310  // 文本全大写展示
311  Text('This is the text content with textCase set to UpperCase.')
312    .textCase(TextCase.UpperCase)
313    .border({ width: 1 })
314    .padding(10)
315    .margin(5)
316  ```
317
318  ![zh-cn_image_0000001562940529](figures/zh-cn_image_0000001562940529.png)
319
320- 通过copyOption属性设置文本是否可复制粘贴。
321
322  ```ts
323  Text("这是一段可复制文本")
324    .fontSize(30)
325    .copyOption(CopyOptions.InApp)
326  ```
327
328  ![zh-cn_image_0000001511580868](figures/zh-cn_image_0000001511580868.png)
329
330
331## 添加事件
332
333Text组件可以添加通用事件，可以绑定onClick、onTouch等事件来响应操作。
334
335
336```ts
337Text('点我')
338  .onClick(()=>{
339      console.info('我是Text的点击响应事件');
340   })
341```
342
343
344## 场景示例
345
346
347```ts
348// xxx.ets
349@Entry
350@Component
351struct TextExample {
352  build() {
353    Column() {
354      Row() {
355        Text("1").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
356        Text("我是热搜词条1")
357          .fontSize(12)
358          .fontColor(Color.Blue)
359          .maxLines(1)
360          .textOverflow({ overflow: TextOverflow.Ellipsis })
361          .fontWeight(300)
362        Text("爆")
363          .margin({ left: 6 })
364          .textAlign(TextAlign.Center)
365          .fontSize(10)
366          .fontColor(Color.White)
367          .fontWeight(600)
368          .backgroundColor(0x770100)
369          .borderRadius(5)
370          .width(15)
371          .height(14)
372      }.width('100%').margin(5)
373
374      Row() {
375        Text("2").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
376        Text("我是热搜词条2 我是热搜词条2 我是热搜词条2 我是热搜词条2 我是热搜词条2")
377          .fontSize(12)
378          .fontColor(Color.Blue)
379          .fontWeight(300)
380          .constraintSize({ maxWidth: 200 })
381          .maxLines(1)
382          .textOverflow({ overflow: TextOverflow.Ellipsis })
383        Text("热")
384          .margin({ left: 6 })
385          .textAlign(TextAlign.Center)
386          .fontSize(10)
387          .fontColor(Color.White)
388          .fontWeight(600)
389          .backgroundColor(0xCC5500)
390          .borderRadius(5)
391          .width(15)
392          .height(14)
393      }.width('100%').margin(5)
394
395      Row() {
396        Text("3").fontSize(14).fontColor(Color.Orange).margin({ left: 10, right: 10 })
397        Text("我是热搜词条3")
398          .fontSize(12)
399          .fontColor(Color.Blue)
400          .fontWeight(300)
401          .maxLines(1)
402          .constraintSize({ maxWidth: 200 })
403          .textOverflow({ overflow: TextOverflow.Ellipsis })
404        Text("热")
405          .margin({ left: 6 })
406          .textAlign(TextAlign.Center)
407          .fontSize(10)
408          .fontColor(Color.White)
409          .fontWeight(600)
410          .backgroundColor(0xCC5500)
411          .borderRadius(5)
412          .width(15)
413          .height(14)
414      }.width('100%').margin(5)
415
416      Row() {
417        Text("4").fontSize(14).fontColor(Color.Grey).margin({ left: 10, right: 10 })
418        Text("我是热搜词条4 我是热搜词条4 我是热搜词条4 我是热搜词条4 我是热搜词条4")
419          .fontSize(12)
420          .fontColor(Color.Blue)
421          .fontWeight(300)
422          .constraintSize({ maxWidth: 200 })
423          .maxLines(1)
424          .textOverflow({ overflow: TextOverflow.Ellipsis })
425      }.width('100%').margin(5)
426    }.width('100%')
427  }
428}
429
430```
431
432![zh-cn_image_0000001562820805](figures/zh-cn_image_0000001562820805.png)
433