Span
作为Text、ContainerSpan组件的子组件,用于显示行内文本的组件。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
该组件从API Version 10开始支持继承父组件Text的属性,即如果子组件未设置属性且父组件设置属性,则继承父组件设置的属性。支持继承的属性仅包括:fontColor、fontSize、fontStyle、fontWeight、decoration、letterSpacing、textCase、fontfamily、textShadow。
子组件
无
接口
Span(value: string | Resource)
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
value | string | Resource | 是 | 文本内容。 |
属性
decoration
decoration(value: DecorationStyleInterface)
设置文本装饰线样式及其颜色。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
value | DecorationStyleInterface12+ | 是 | 文本装饰线样式对象。 默认值: { type: TextDecorationType.None, color: Color.Black, style: TextDecorationStyle.SOLID } 说明: style参数不支持卡片能力。 |
letterSpacing
letterSpacing(value: number | string)
设置文本字符间距。取值小于0,字符聚集重叠,取值大于0且随着数值变大,字符间距越来越大,稀疏分布。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
value | number | string | 是 | 文本字符间距。 |
textCase
textCase(value: TextCase)
设置文本大小写。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
value | TextCase | 是 | 文本大小写。 默认值:TextCase.Normal |
lineHeight10+
lineHeight(value: Length)
设置文本行高。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
value | Length | 是 | 文本行高。 |
font10+
font(value: Font)
设置文本样式。包括字体大小、字体粗细、字体族和字体风格。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
value | Font | 是 | 文本样式。 |
textShadow11+
textShadow(value: ShadowOptions | Array<ShadowOptions>)
设置文字阴影效果。该接口支持以数组形式入参,实现多重文字阴影。不支持fill字段, 不支持智能取色模式。
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
value | ShadowOptions | Array<ShadowOptions> | 是 | 文字阴影效果。 |
事件
通用事件仅支持点击事件。
说明:
由于Span组件无尺寸信息,因此点击事件返回的ClickEvent对象的target属性无效。
BaseSpan
定义BaseSpan基础类,包含Span的通用属性。
系统能力: SystemCapability.ArkUI.ArkUI.Full
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
textBackgroundStyle11+
textBackgroundStyle(style: TextBackgroundStyle)
设置背景样式。作为ContainerSpan的子组件时可以继承它的此属性值,优先使用其自身的此属性。
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
style | TextBackgroundStyle | 是 | 背景样式。 默认值: { color: Color.Transparent, radius: 0 } |
baselineOffset12+
baselineOffset(value: LengthMetrics)
设置Span基线的偏移量。此属性与父组件的baselineOffset是共存的。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
value | LengthMetrics | 是 | 设置Span基线的偏移量,设置该值为百分比时,按默认值显示。 正数内容向上偏移,负数向下偏移。 默认值:0 在ImageSpan中,设置为非0时会导致设置verticalAlign失效。 |
示例
示例1
decoration、letterSpacing、textCase属性接口使用示例
// xxx.ets
@Entry
@Component
struct SpanExample {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC)
Text() {
Span('In Line')
Span(' Component')
Span(' !')
}
Text() {
Span('This is the Span component').fontSize(12).textCase(TextCase.Normal)
.decoration({ type: TextDecorationType.None, color: Color.Red })
}
// 文本横线添加
Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC)
Text() {
Span('I am Underline-WAVY-span').decoration({ type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY }).fontSize(12)
}
Text() {
Span('I am LineThrough-DOTTED-span')
.decoration({ type: TextDecorationType.LineThrough, color: Color.Red, style: TextDecorationStyle.DOTTED })
.fontSize(12)
}
Text() {
Span('I am Overline-DASHED-span').decoration({ type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DASHED }).fontSize(12)
}
// 文本字符间距
Text('LetterSpacing').fontSize(9).fontColor(0xCCCCCC)
Text() {
Span('span letter spacing')
.letterSpacing(0)
.fontSize(12)
}
Text() {
Span('span letter spacing')
.letterSpacing(-2)
.fontSize(12)
}
Text() {
Span('span letter spacing')
.letterSpacing(3)
.fontSize(12)
}
// 文本大小写展示设置
Text('Text Case').fontSize(9).fontColor(0xCCCCCC)
Text() {
Span('I am Lower-span').fontSize(12)
.textCase(TextCase.LowerCase)
.decoration({ type: TextDecorationType.None })
}
Text() {
Span('I am Upper-span').fontSize(12)
.textCase(TextCase.UpperCase)
.decoration({ type: TextDecorationType.None })
}
}.width('100%').height(250).padding({ left: 35, right: 35, top: 35 })
}
}
ts
示例2
@Entry
@Component
struct TextSpanExample {
@State textShadows : ShadowOptions | Array<ShadowOptions> = [{ radius: 10, color: Color.Red, offsetX: 10, offsetY: 0 },{ radius: 10, color: Color.Black, offsetX: 20, offsetY: 0 },
{ radius: 10, color: Color.Brown, offsetX: 30, offsetY: 0 },{ radius: 10, color: Color.Green, offsetX: 40, offsetY: 0 },
{ radius: 10, color: Color.Yellow, offsetX: 100, offsetY: 0 }]
build() {
Column({ space: 8 }) {
Text() {
Span('123456789').fontSize(50).textShadow(this.textShadows)
}
Text() {
Span('123456789') // span can inherit text shadow & font size from outer text
}.fontSize(50).textShadow(this.textShadows)
}
}
}
ts
示例3
// xxx.ets
@Component
@Entry
struct Index {
build() {
Column() {
Text() {
Span(' Hello World ! ')
.fontSize('20fp')
.textBackgroundStyle({color: "#7F007DFF", radius: "5vp"})
.fontColor(Color.White)
}
}.width('100%').margin({bottom: '5vp'}).alignItems(HorizontalAlign.Center)
}
}
ts
示例4
该示例实现了如何设置Span基线的偏移量。
import { LengthUnit, LengthMetrics } from '@ohos.arkui.node';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
Text(){
Span('word1')
.baselineOffset(new LengthMetrics(20,LengthUnit.VP))
Span('word2')
.baselineOffset(new LengthMetrics(0,LengthUnit.VP))
ImageSpan($r("app.media.icon"))
.width('45px')
.baselineOffset(new LengthMetrics(-20,LengthUnit.VP))
}
.backgroundColor(Color.Gray)
}
.width('100%')
}
.height('100%')
}
}
ts
写在最后
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing ,不定期分享原创知识。