33、鸿蒙/组件/文本显示 (Text/Span)

Text是文本组件，通常用于展示用户视图，如显示文章的文字。具体用法请参考Text。

创建文本

• string字符串

 Text('string文本')

• 引用Resource资源
  资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json；/resources/zh_CN/element/string.json 语言包里可重写上面json文件

 Text($r('app.string.module_desc'))

添加子组件

Span只能作为Text和RichEditor组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。

• 创建Span。
  Span组件需要写到Text组件内，单独写Span组件不会显示信息，Text与Span同时配置文本内容时，Span内容覆盖Text内容。

Text('不会显示的文本'){
        Span("文本")
}.backgroundColor(Color.Red)

• 设置文本装饰线及颜色。
  通过decoration设置文本装饰线及颜色。

Text(){
        Span('span1').decoration({
          type: TextDecorationType.LineThrough, // 删除线
          color: Color.Red
        })
}
Text(){
        Span('span1').decoration({
          type: TextDecorationType.Underline, // 下划线
          color: Color.Red
        })
}
Text(){
        Span('span1').decoration({
          type: TextDecorationType.Overline, // 上划线
          color: Color.Red
        })
}

• 通过textCase设置文字一直保持大写或者小写状态。

Text(){
        Span("i am SM").textCase(TextCase.LowerCase) // 小写
}
Text(){
        Span("i am SM").textCase(TextCase.UpperCase) // 大写
}

• 添加事件。
  由于Span组件无尺寸信息，事件仅支持添加点击事件onClick。

 Text(){
        Span('点击').onClick(()=>{
          console.log('点击');
        })
}

自定义文本样式

• 通过textAlign属性设置文本对齐样式。

Text('左对齐').textAlign(TextAlign.Start).width(300).backgroundColor(Color.Red)
Text('居中对齐').textAlign(TextAlign.Center).width(300).backgroundColor(Color.Red)
Text('靠右对齐').textAlign(TextAlign.End).width(300).backgroundColor(Color.Red)

• 通过textOverflow属性控制文本超长处理，textOverflow需配合maxLines一起使用（默认情况下文本自动折行）。

 Text('sdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdf')
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(2)

• 通过lineHeight属性设置文本行高。

Text('sdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdf')
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(2)
.lineHeight(30)

• 通过decoration属性设置文本装饰线样式及其颜色。

Text('删除线').decoration({
        type: TextDecorationType.LineThrough,
        color: Color.Red
})
Text('下划线').decoration({
        type: TextDecorationType.Underline,
        color: Color.Red
})
Text('上划线').decoration({
        type: TextDecorationType.Overline,
        color: Color.Red
})

• 通过baselineOffset属性设置文本基线的偏移量。

Text('This is the text content with baselineOffset 0.')
        .baselineOffset(-10)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)

• 通过letterSpacing属性设置文本字符间距。

 Text('sadfasdfaasdfas')
        .letterSpacing(10)

• 通过copyOption属性设置文本是否可复制粘贴。

Text('sadfasdfaasdfas')
        .letterSpacing(10)
        .copyOption(CopyOptions.InApp)

-- 添加事件

Text('sadfasdfaasdfas')
        .letterSpacing(10)
        .copyOption(CopyOptions.InApp)
        .onClick((e)=>{
          console.log('被点击');
})

• 添加边框

Text('添加边框')
        .border({
          width: 2,
          color: Color.Red,
          style: BorderStyle.Dotted
})
Text('添加左右边框')
        .border({
          width: {
            left: 1,
            right: 2
          },
          color:{
            left:  Color.Red,
            right:  Color.Blue
          },
          style: {
            left: BorderStyle.Dotted,
            right: BorderStyle.Solid
          }
})

• 设置圆角

 Text('圆角').border({
        color: Color.Red,
        style: BorderStyle.Solid,
        width: 1
}).width(100).textAlign(TextAlign.Center)
        .borderRadius(20)

Text('圆角').border({
        color: Color.Red,
        style: BorderStyle.Solid,
        width: 1
}).width(100).textAlign(TextAlign.Center)
        .borderRadius({
          topLeft: 10,
          bottomRight: 10
})

Text("圆形")
        .width(100).height(100)
        .border({
          color: Color.Red,
          style: BorderStyle.Solid,
          width: 1
}).textAlign(TextAlign.Center)
        .borderRadius(50)

• 背景图

 Text('背景图')
        .width(100).height(100)
        .backgroundColor(Color.Red)
        .backgroundImage($r('app.media.app_icon'), ImageRepeat.NoRepeat)
        .backgroundImagePosition({
          x: 10,
          y: 20
})
// .backgroundImagePosition(Alignment.Center) // 居中
.backgroundImageSize(ImageSize.Contain)