3.5、HarmonyOS Next 文本显示(Text/Span)

创建文本

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

string 字符串

效果图

ts 复制代码
Text('我是一段文本')

引用 Resource 资源

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

引用的资源位于:src/main/resources/base/element/string.json 对应代码

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

添加子组件

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

创建 Span

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

ts 复制代码
Text('我是Text') {
  Span('我是Span')
}
.padding(10)
.borderWidth(1)

设置文本装饰线及颜色。

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

ts 复制代码
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设置文字一直保持大写或者小写状态。

ts 复制代码
Text() {
  Span('I am Upper-span').fontSize(12)
    .textCase(TextCase.UpperCase)
}
.borderWidth(1)
.padding(10)
.margin({left:10})

添加事件。

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

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

自定义文本样式

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

ts 复制代码
Column() {
	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 一起使用(默认情况下文本自动折行)。

ts 复制代码
Column() {
   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)
}
.margin({left:10})

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

ts 复制代码
Column() {
  Text('This is the text with the line height set. This is the text with the line height set.')
    .width(300).fontSize(12).border({ width: 1 }).padding(10)
  Text('This is the text with the line height set. This is the text with the line height set.')
    .width(300).fontSize(12).border({ width: 1 }).padding(10)
    .lineHeight(20)
}
.margin({left:10})

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

ts 复制代码
Column() {
  Text('This is the text')
     .decoration({
       type: TextDecorationType.LineThrough,
       color: Color.Red
     })
     .borderWidth(1).padding(10).margin(5)
   Text('This is the text')
     .decoration({
       type: TextDecorationType.Overline,
       color: Color.Red
     })
     .borderWidth(1).padding(10).margin(5)
   Text('This is the text')
     .decoration({
       type: TextDecorationType.Underline,
       color: Color.Red
     })
     .borderWidth(1).padding(10).margin(5)
}

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

ts 复制代码
Text('This is the text content with letterSpacing 0.')
  .letterSpacing(0)
  .fontSize(12)
  .border({ width: 1 })
  .padding(10)
  .width('100%')
  .margin(5)
Text('This is the text content with letterSpacing 3.')
  .letterSpacing(3)
  .fontSize(12)
  .border({ width: 1 })
  .padding(10)
  .width('100%')
  .margin(5)
Text('This is the text content with letterSpacing -1.')
  .letterSpacing(-1)
  .fontSize(12)
  .border({ width: 1 })
  .padding(10)
  .width('100%')
  .margin(5)

通过 minFontSizemaxFontSize 自适应字体大小,minFontSize 设置文本最小显示字号,maxFontSize设置文本最大显示字号,minFontSizemaxFontSize 必须搭配同时使用,以及需配合 maxline 或布局大小限制一起使用,单独设置不生效。

ts 复制代码
Column() {
  Text('我的最大字号为30,最小字号为5,宽度为250,maxLines为1')
    .width(250)
    .maxLines(1)
    .maxFontSize(30)
    .minFontSize(5)
    .border({ width: 1 })
    .padding(10)
    .margin(5)
  Text('我的最大字号为30,最小字号为5,宽度为250,maxLines为2')
    .width(250)
    .maxLines(2)
    .maxFontSize(30)
    .minFontSize(5)
    .border({ width: 1 })
    .padding(10)
    .margin(5)
  Text('我的最大字号为30,最小字号为15,宽度为250,高度为50')
    .width(250)
    .height(50)
    .maxFontSize(30)
    .minFontSize(15)
    .border({ width: 1 })
    .padding(10)
    .margin(5)
  Text('我的最大字号为30,最小字号为15,宽度为250,高度为100')
    .width(250)
    .height(100)
    .maxFontSize(30)
    .minFontSize(15)
    .border({ width: 1 })
    .padding(10)
    .margin(5)
}

通过 textCase 属性设置文本大小写

ts 复制代码
 Column() {
  Text('This is the text content with textCase set to Normal.')
     .textCase(TextCase.Normal)
     .padding(10)
     .border({ width: 1 })
     .padding(10)
     .margin(5)

   // 文本全小写展示
   Text('This is the text content with textCase set to LowerCase.')
     .textCase(TextCase.LowerCase)
     .border({ width: 1 })
     .padding(10)
     .margin(5)

   // 文本全大写展示
   Text('This is the text content with textCase set to UpperCase.')
     .textCase(TextCase.UpperCase)
     .border({ width: 1 })
     .padding(10)
     .margin(5)
}

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

ts 复制代码
Text("这是一段可复制文本")
  .fontSize(30)
   .copyOption(CopyOptions.InApp)
   .margin({bottom: 15})

添加事件

Text 组件可以添加通用事件,可以绑定 onClickonTouch 等事件来响应操作。

ts 复制代码
Text('点我')
  .onClick(()=>{
      console.info('我是Text的点击响应事件');
   })

上一篇 3.4、进度条(Progress) 下一篇 3.6、文本输入(TextInput/TextArea)

相关推荐
爱笑的眼睛1120 小时前
深入剖析 HarmonyOS ArkUI 声明式开发:状态管理艺术与最佳实践
华为·harmonyos
安卓开发者21 小时前
鸿蒙NEXT交互机制解析:从输入设备到手势响应的全面指南
microsoft·交互·harmonyos
奶糖不太甜。1 天前
鸿蒙分布式数据同步失败全解
分布式·华为·harmonyos·数据同步
小小小小小星2 天前
鸿蒙权限相关问题之应用访问网络、文件等功能时崩溃或无响应,日志提示'权限被拒绝'
harmonyos
leon_teacher2 天前
ArkUI核心功能组件使用
android·java·开发语言·javascript·harmonyos·鸿蒙
lisir92 天前
鸿蒙手势实战解析+手势冲突解决策略总结
harmonyos
安卓开发者2 天前
鸿蒙Next图形绘制指南:从基础几何图形到复杂UI设计
ui·华为·harmonyos
开发小能手嗨啊3 天前
鸿蒙开发进阶(HarmonyOS)
harmonyos·鸿蒙·鸿蒙开发·开发教程·纯血鸿蒙·南向开发·北向开发
大土豆的bug记录3 天前
鸿蒙总改变字体大小设置
华为·harmonyos
我爱学习_zwj3 天前
【鸿蒙面试题-6】LazyForEach 懒加载
华为·harmonyos