华为仓颉鸿蒙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