OpenHarmony实战开发-如何实现文本显示 (Text/Span)

Text是文本组件，通常用于展示用户视图，如显示文章的文字。

创建文本

Text可通过以下两种方式来创建：

• string字符串

Text('我是一段文本')

• 引用Resource资源

资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json。

Text($r('app.string.module_desc'))
  .baselineOffset(0)
  .fontSize(30)
  .border({
    width: 1 })
  .padding(10)
  .width(300)

添加子组件

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

• 创建Span。

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

Text('我是Text') {
   
  Span('我是Span')
}
.padding(10)
.borderWidth(1)

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

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

Text() {
   
  Span('我是Span1，').fontSize(16).fontColor(Color.Grey)
    .decoration({
    type: TextDecorationType.LineThrough, color: Color.Red })
  Span('我是Span2').fontColor(Color.Blue).fontSize(16)
    .fontStyle(FontStyle.Italic)
    .decoration({
    type: TextDecorationType.Underline, color: Color.Black })
  Span('，我是Span3').fontSize(16).fontColor(Color.Grey)
    .decoration({
    type: TextDecorationType.Overline, color: Color.Green })
}
.borderWidth(1)
.padding(10)

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

Text() {
   
  Span('I am Upper-span').fontSize(12)
    .textCase(TextCase.UpperCase)
}
.borderWidth(1)
.padding(10)

• 添加事件。

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

Text() {
   
  Span('I am Upper-span').fontSize(12)
    .textCase(TextCase.UpperCase)
    .onClick(()=>{
   
      console.info('我是Span——onClick')
    })
}

自定义文本样式

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

Text('左对齐')
  .width(300)
  .textAlign(TextAlign.Start)
  .border({
    width: 1 })
  .padding(10)
Text('中间对齐')
  .width(300)
  .textAlign(TextAlign.Center)
  .border({
    width: 1 })
  .padding(10)
Text('右对齐')
  .width(300)
  .textAlign(TextAlign.End)
  .border({
    width: 1 })
  .padding(10)

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

Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
  .width(250)
  .textOverflow({
    overflow: TextOverflow.None })
  .maxLines(1)
  .fontSize(12)
  .border({
    width: 1 })
  .padding(10)
Text('我是超长文本，超出的部分显示省略号。I am an extra long text, with ellipses displayed for any excess。')
  .width(250)
  .textOverflow({
    overflow: TextOverflow.Ellipsis })
  .maxLines(1)
  .fontSize(12)
  .border({
    width: 1 })
  .padding(10)
Text('当文本溢出其尺寸时，文本将滚动显示。When the text overflows its dimensions, the text will scroll for displaying.')       
  .width(250)
  .textOverflow(