HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】

摘要

作者：红目香薰 团队：坚果派 团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。

Span

作为Text组件的子组件，用于显示行内文本的组件。

接口

Span(value: string | Resource)

参数:

参数名	参数类型	必填	参数描述
value	string | Resource	是	文本内容。

属性

通用属性方法仅支持通用文本样式，不支持触摸热区设置。

名称	参数类型	描述
decoration	{ type: TextDecorationType, color?: ResourceColor }	设置文本装饰线样式及其颜色。 默认值：{ type: TextDecorationType.None color：Color.Black }
letterSpacing	number | string	设置文本字符间距。
textCase	TextCasse	设置文本大小写。 默认值：Normal

事件

通用事件仅支持点击事件。

代码示例

代码语言：text复制

  build() {
     Flex({ 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({ type: TextDecorationType.None, color: Color.Red })
       }
       // 文本横线添加
       Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC)
       Text() {
         Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12)
       }
       Text() {
         Span('I am LineThrough-span')
           .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
           .fontSize(12)
       }
       Text() {
         Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).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 })
   }

实际效果：

华为 接口 事件 harmonyos text

0 人点赞