ArkUI-Text、Span详解

ArkUI-Text/Span 详解

@Entry
@Component
struct TextDemo {
  build() {
    Column({space: 16}) {
      Text('我是文本Text组件')

      // 引用Resource资源。
      // 资源引用类型可以通过$r创建Resource类型对象
      // 文件位置为/resources/base/element/string.json。
      Text($r('app.string.my_text'))
        // 设置基线偏移量。
        .baselineOffset(5)
        // 设置字体
        .fontSize(20)
        .fontStyle(FontStyle.Italic)
        .fontWeight(FontWeight.Medium)
        // 边框设置
        .border({ width: 1 })
        .borderColor(Color.Red)
        .borderRadius(20)
        // 边距设置
        .padding(5)
        // 宽度设置
        .width(200)

      // Span只能作为Text和RichEditor组件的子组件显示文本内容。
      // 可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。
      //
      // 创建Span。
      // Span组件需要写到Text组件内，单独写Span组件不会显示信息
      // Text与Span同时配置文本内容时，Span内容覆盖Text内容。
      Text('显示text') {
        Span('显示 Span')
      }
      .padding(8)
      .fontColor(Color.White)
      .fontSize(20)
      .backgroundColor(Color.Red)
      .borderRadius(10)

      // 设置文本装饰线及颜色。
      // 通过decoration设置文本装饰线及颜色。
      Text() {
        Span('我是一名保安，')
          .fontSize(16)
          .fontColor(Color.Grey)
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Orange })

        Span('保卫一方平安')
          .fontColor(Color.Red)
          .fontSize(16)
          .fontStyle(FontStyle.Italic)
          .decoration({ type: TextDecorationType.Underline, color: Color.Black })

        Span('，最爱吃小熊饼干')
          .fontSize(16)
          .fontColor(Color.Blue)
          .decoration({ type: TextDecorationType.Overline, color: Color.Red })
      }
      .maxLines(3)
      .borderWidth(1)
      .padding(10)

      // 通过textCase设置文字一直保持大写或者小写状态。
      Text() {
        Span('I\'m a security guard')
          .fontSize(12)
          .textCase(TextCase.UpperCase)
      }
      .borderWidth(1)
      .borderRadius(8)
      .borderColor(Color.Red)
      .padding(12)

      // 添加事件。
      // 由于Span组件无尺寸信息，事件仅支持添加点击事件onClick。
      Text() {
        Span('Keep one side safe')
          .fontSize(12)
          .textCase(TextCase.UpperCase)

          .onClick(()=>{
            console.info('我是一名保安，保卫一方平安')
          })
      }
      .borderWidth(1)
      .borderRadius(8)
      .borderColor(Color.Red)
      .padding(12)

      // 自定义Text的Modifier
      Text('自定义Text的Modifier')
        .attributeModifier(new MyTextModifier())

      // 自定义文本样式
      // 通过textAlign属性设置文本对齐样式。

      // 头部对齐（效果居左对齐）
      Text('我是一名保安')
        .textAlign(TextAlign.Start)
        .attributeModifier(new MyTextModifier())

      // 居中对齐
      Text('保卫一方平安')
        .fontSize(18)
        .textAlign(TextAlign.Center)
        .attributeModifier(new MyTextModifier())

      // 尾部对齐（效果居右对齐）
      Text('喜欢业主小丹')
        .fontSize(20)
        .fontColor(Color.Red)
        .textAlign(TextAlign.End)
        .attributeModifier(new MyTextModifier())
        .padding(10)

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

      // 自动折行
      Text('我是一名保安，保卫一方平安，最爱吃小熊饼干，喜欢业主小丹。')
        .attributeModifier(new MyTextModifier())
        .textOverflow({ overflow: TextOverflow.None })
        .maxLines(1)
        .fontSize(12)

      // 尾部截取...
      Text('我是一名保安，保卫一方平安，最爱吃小熊饼干，喜欢业主小丹。')
        .attributeModifier(new MyTextModifier())
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(1)
        .fontSize(12)

      // 跑马灯效果
      Text('我是一名保安，保卫一方平安，最爱吃小熊饼干，喜欢业主小丹。')
        .attributeModifier(new MyTextModifier())
        .textOverflow({ overflow: TextOverflow.MARQUEE })
        .maxLines(1)
        .fontSize(12)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
  }
}

• 自定义Text的 Modifier

/// 自定义Text的 Modifier
class MyTextModifier implements AttributeModifier<TextAttribute>{
  applyNormalAttribute(instance: TextAttribute): void {
    instance
      .width(300)
      .border({ width: 1, color: Color.Red, radius: 16 })
      .padding(10)
  }
}

效果如下：