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) //密码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值