• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Span
2
3作为[Text](ts-basic-components-text.md)、[ContainerSpan](ts-basic-components-containerspan.md)组件的子组件，用于显示行内文本的组件。
4
5>  **说明：**
6>
7>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9>  该组件从API Version 10开始支持继承父组件Text的属性，即如果子组件未设置属性且父组件设置属性，则继承父组件设置的属性。支持继承的属性仅包括：fontColor、fontSize、fontStyle、fontWeight、decoration、letterSpacing、textCase、fontfamily、textShadow。
10
11
12## 子组件
13
14无
15
16
17## 接口
18
19Span(value: string | Resource)
20
21从API version 9开始，该接口支持在ArkTS卡片中使用。
22
23**参数：**
24
25| 参数名 | 参数类型 | 必填 | 参数描述 |
26| -------- | -------- | -------- | -------- |
27| value | string \| [Resource](ts-types.md#resource) | 是 | 文本内容。 |
28
29
30## 属性
31
32通用属性方法仅支持[文本通用](ts-universal-attributes-text-style.md)。
33
34| 名称 | 参数类型 | 描述 |
35| -------- | -------- | -------- |
36| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值：{<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。|
37| letterSpacing       | number \| string  | 设置文本字符间距。取值小于0，字符聚集重叠，取值大于0且随着数值变大，字符间距越来越大，稀疏分布。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。                                |
38| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br/>默认值：TextCase.Normal <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
39| font<sup>10+</sup> | [Font](ts-types.md#font) | 设置文本样式。包括字体大小、字体粗细、字体族和字体风格。|
40| textShadow<sup>11+</sup>  |  [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明)&nbsp;\|&nbsp;Array&lt;[ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明)> | 设置文字阴影效果。该接口支持以数组形式入参，实现多重文字阴影。<br/>**说明：**<br/>不支持fill字段, 不支持智能取色模式。 |
41| textBackgroundStyle<sup>11+</sup> | [TextBackgroundStyle](ts-basic-components-containerspan.md#textbackgroundstyle对象说明)                                                                                           | 设置背景样式。<br />默认值:<br />{<br />  color: Color.Transparent,<br />  radius: 0<br />} <br/>**说明：**<br/>作为[ContainerSpan](ts-basic-components-containerspan.md)的子组件时可以继承它的此属性值，优先使用其自身的此属性。 |
42
43
44## 事件
45
46通用事件仅支持[点击事件](ts-universal-events-click.md)。
47
48>  **说明：**
49>
50>  由于Span组件无尺寸信息，因此点击事件返回的ClickEvent对象的target属性无效。
51
52
53## 示例
54### 示例1
55```ts
56// xxx.ets
57@Entry
58@Component
59struct SpanExample {
60  build() {
61    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
62      Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC)
63      Text() {
64        Span('In Line')
65        Span(' Component')
66        Span(' !')
67      }
68
69      Text() {
70        Span('This is the Span component').fontSize(12).textCase(TextCase.Normal)
71          .decoration({ type: TextDecorationType.None, color: Color.Red })
72      }
73
74      // 文本横线添加
75      Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC)
76      Text() {
77        Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12)
78      }
79
80      Text() {
81        Span('I am LineThrough-span')
82          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
83          .fontSize(12)
84      }
85
86      Text() {
87        Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12)
88      }
89
90      // 文本字符间距
91      Text('LetterSpacing').fontSize(9).fontColor(0xCCCCCC)
92      Text() {
93        Span('span letter spacing')
94          .letterSpacing(0)
95          .fontSize(12)
96      }
97
98      Text() {
99        Span('span letter spacing')
100          .letterSpacing(-2)
101          .fontSize(12)
102      }
103
104      Text() {
105        Span('span letter spacing')
106          .letterSpacing(3)
107          .fontSize(12)
108      }
109
110
111      // 文本大小写展示设置
112      Text('Text Case').fontSize(9).fontColor(0xCCCCCC)
113      Text() {
114        Span('I am Lower-span').fontSize(12)
115          .textCase(TextCase.LowerCase)
116          .decoration({ type: TextDecorationType.None })
117      }
118
119      Text() {
120        Span('I am Upper-span').fontSize(12)
121          .textCase(TextCase.UpperCase)
122          .decoration({ type: TextDecorationType.None })
123      }
124    }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 })
125  }
126}
127```
128
129![Span](figures/span.png)
130
131### 示例2
132``` ts
133@Entry
134@Component
135struct TextSpanExample {
136  @State textShadows : ShadowOptions | Array<ShadowOptions> = [{ radius: 10, color: Color.Red, offsetX: 10, offsetY: 0 },{ radius: 10, color: Color.Black, offsetX: 20, offsetY: 0 },
137      { radius: 10, color: Color.Brown, offsetX: 30, offsetY: 0 },{ radius: 10, color: Color.Green, offsetX: 40, offsetY: 0 },
138      { radius: 10, color: Color.Yellow, offsetX: 100, offsetY: 0 }]
139  build() {
140    Column({ space: 8 }) {
141      Text() {
142        Span('123456789').fontSize(50).textShadow(this.textShadows)
143      }
144      Text() {
145        Span('123456789') // span can inherit text shadow & font size from outer text
146      }.fontSize(50).textShadow(this.textShadows)
147    }
148  }
149}
150```
151![TextshadowExample](figures/text_span_textshadow.png)
152
153### 示例3
154``` ts
155// xxx.ets
156@Component
157@Entry
158struct Index {
159  build() {
160    Column() {
161      Text() {
162        Span('   Hello World !   ')
163          .fontSize('20fp')
164          .textBackgroundStyle({color: "#7F007DFF", radius: "5vp"})
165          .fontColor(Color.White)
166      }
167    }.width('100%').margin({bottom: '5vp'}).alignItems(HorizontalAlign.Center)
168  }
169}
170```
171![TextBackgroundStyleExample](figures/span_textbackgroundstyle.png)