HarmonyOS ArkUI(基于ArkTS) 使用文本

一 文本显示 (Text/Span)

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

  // 可以直接输入，也可以导入字符串资源
      Text('我是一个文本')
      Text($r('app.string.module_desc'))

 

 // 3种对齐方式
      Text('左对齐')
        .width('100%')
      Text('居中')
        .textAlign(TextAlign.Center)
        .width('100%')
      Text('右对齐')
        .textAlign(TextAlign.End)
        .width('100%')

 

 //可以省略
      Text('11111111111111111111111111111111111111111111')
        .textOverflow({overflow:TextOverflow.Ellipsis})
        .maxLines(1)
      //可滚动
      Text('11111111111111111111111111111111111111111111')
        .textOverflow({overflow:TextOverflow.MARQUEE})
        .maxLines(1)

 

  // decoration 设置文本装饰器颜色
      Text('hello')
        .decoration({
          type:TextDecorationType.LineThrough,
          color:Color.Red
        })
      Text('hello')
        .decoration({
          type:TextDecorationType.Underline,
          color:Color.Red
        })
      Text('hello')
        .decoration({
          type:TextDecorationType.Overline,
          color:Color.Red
        })

 

 //复制
      Text("这是一段可复制文本")
        .fontSize(30)
        .copyOption(CopyOptions.InApp)

 

 // Span只能作为Text和RichEditor组件的子组件显示文本内容。
      // 可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等
      Text('我是Text') {
        Span('我是Span')
      }
      .padding(10)
      .borderWidth(1)

 

完整代码如下：

@Entry
@Component
struct  Main{
  build() {
    Column(){
      // 可以直接输入，也可以导入字符串资源
      Text('我是一个文本')
      Text($r('app.string.module_desc'))
      // 3种对齐方式
      Text('左对齐')
        .width('100%')
      Text('居中')
        .textAlign(TextAlign.Center)
        .width('100%')
      Text('右对齐')
        .textAlign(TextAlign.End)
        .width('100%')
      //可以省略
      Text('11111111111111111111111111111111111111111111')
        .textOverflow({overflow:TextOverflow.Ellipsis})
        .maxLines(1)
      //可滚动
      Text('11111111111111111111111111111111111111111111')
        .textOverflow({overflow:TextOverflow.MARQUEE})
        .maxLines(1)

      // decoration 设置文本装饰器颜色
      Text('hello')
        .decoration({
          type:TextDecorationType.LineThrough,
          color:Color.Red
        })
      Text('hello')
        .decoration({
          type:TextDecorationType.Underline,
          color:Color.Red
        })
      Text('hello')
        .decoration({
          type:TextDecorationType.Overline,
          color:Color.Red
        })
      //复制
      Text("这是一段可复制文本")
        .fontSize(30)
        .copyOption(CopyOptions.InApp)

      // Span只能作为Text和RichEditor组件的子组件显示文本内容。
      // 可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等
      Text('我是Text') {
        Span('我是Span')
      }
      .padding(10)
      .borderWidth(1)

    }
    .width('100%')
  }
}

二 文本输入 (TextInput/TextArea)

//单行输入框
      TextInput({placeholder:'我是提示'})
        .width(300)
      //多行
      TextArea()
        .width(300)

//设置默认类型
      TextInput().type(InputType.Normal) // 正常
      TextInput().type(InputType.Password) //密码