华为仓颉鸿蒙HarmonyOS NEXT原生UI基础组件Span

作为Text组件的子组件，用于显示行内文本的组件。
子组件
无
构造函数
init(String)
public init(content: String)参数名
参数类型
必填
默认值
描述
content
String
是

文本内容。
init(CJResource)
public init(content: CJResource)参数名
参数类型
必填
默认值
描述
content
CJResource
是

文本内容。
init(PluralResource)
public init(content: PluralResource)参数名
参数类型
必填
默认值
描述
content
PluralResource
是

文本内容。
函数
decoration(TextDecorationType, Color)
public func decoration(decorationType!: TextDecorationType, color!: Color = Color.BLACK): This设置文本装饰线样式及其颜色。
参数名
参数类型
必填
默认值
描述
decorationType
TextDecorationType
是

文本装饰线样式。
color
Color
否
Color.BLACK
文本装饰线颜色。
decoration(TextDecorationType, UInt32)
public func decoration(decorationType!: TextDecorationType, color!: UInt32): This设置文本装饰线样式及其颜色。
参数名
参数类型
必填
默认值
描述
decorationType
TextDecorationType
是

文本装饰线样式。
color
UInt32
是

文本装饰线颜色。
decoration(TextDecorationType, CJResource)
public func decoration(decorationType!: TextDecorationType, color!: CJResource): This设置文本装饰线样式及其颜色。
参数名
参数类型
必填
默认值
描述
decorationType
TextDecorationType
是

文本装饰线样式。
color
CJResource
是

文本装饰线颜色。
textCase(TextCase)
public func textCase(value: TextCase): This设置文本大小写。
参数名
参数类型
必填
默认值
描述
textCase
TextCase
是
TextCase.Normal
设置文本大小写。
letterSpacing(Length)
public func letterSpacing(value: Length): This设置文本字符间距。
参数名
参数类型
必填
默认值
描述
value
Length
是
0.vp
设置文本字符间距。
letterSpacing(Float64)
public func letterSpacing(value: Float64): This设置文本字符间距。
参数名
参数类型
必填
默认值
描述
value
Float64
是

设置文本字符间距。
letterSpacing(Int64)
public func letterSpacing(value: Int64): This设置文本字符间距。
参数名
参数类型
必填
默认值
描述
value
Int64
是
0.vp
设置文本字符间距。
letterSpacing(CJResource)
public func letterSpacing(value: CJResource): This设置文本字符间距。
参数名
参数类型
必填
默认值
描述
value
CJResource
是
0.vp
设置文本字符间距。
通用属性/通用事件
通用属性：仅支持通用文本样式，不支持触摸热区设置。
通用事件：仅支持点击事件，由于Span组件无尺寸信息，因此点击事件返回的ClickEvent对象的target属性无效。
示例代码
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import std.collection.*

@Entry
@Component
class MyView {
func build() {
Flex(FlexParams(direction: FlexDirection.Column, alignItems: ItemAlign.Start,
justifyContent: FlexAlign.SpaceBetween)) {
Text("Basic Usage")
.fontSize(9)
.fontColor(0xCCCCCC)
Text() {
Span("This is the Span component")
.fontSize(12)
.textCase(TextCase.Normal)
.decoration(decorationType: TextDecorationType.None, color: Color.RED)
}

Text("Text Decoration")
.fontSize(9)
.fontColor(0xCCCCCC)
Text() {
Span("I am Underline-span")
.decoration(decorationType: TextDecorationType.Underline, color: Color.RED)
.fontSize(12)
}
Text() {
Span("I am LineThrough-span")
.decoration(decorationType: TextDecorationType.LineThrough, color: Color.RED)
.fontSize(12)
}
Text() {
Span("I am Overline-span")
.decoration(decorationType: TextDecorationType.Overline, color: Color.RED)
.fontSize(12)
}

Text("Text Case").fontSize(9).fontColor(0xCCCCCC)
Text() {
Span("I am Lower-span")
.textCase(TextCase.LowerCase)
.fontSize(12)
.decoration(decorationType: TextDecorationType.None, color: Color.RED)
}
Text() {
Span("I am Upper-span")
.textCase(TextCase.UpperCase)
.fontSize(12)
.decoration(decorationType: TextDecorationType.None, color: Color.RED)
}
Text() {
Span("I am LetterSpacing")
.fontSize(20)
.decoration(decorationType: TextDecorationType.None, color: Color.RED)
.letterSpacing(10)
}
Text() {
Span("I am Span1").fontSize(30)
.decoration(decorationType: TextDecorationType.None, color: Color.RED)
Span("I am Span2").fontSize(30)
.decoration(decorationType: TextDecorationType.None, color: Color.RED)
}
}
.width(100.percent)
.height(250)
.padding(left: 35, right: 35, top: 35)
}
}

​
如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！
技术交流群可加wx“LB-9191” 备注cangjie