HarmonyOS NEXT鸿蒙开发：Text文本显示组件

作者：马育民 • • 阅读：10057

介绍

Text 组件是用于显示文本内容的基础组件，支持丰富的样式设置和交互能力。

官方网址

基本用法

Text 组件最基础的用法是直接显示文本内容：

Text("学习鸿蒙开发")
        .fontSize(30) // 设置字号

写在下面文件中：

src/main/ets/pages/Index.ets

Index.ets 的作用详见 链接

如下图位置：

启动预览

启动预览步骤详见 链接

显示如下图：

动态显示内容

绑定变量动态显示内容

@State message: string = '动态文本内容'

// 在build方法中
Text(this.message)
  .fontSize(30) // 设置字号

常用属性

字体样式

Text('字体样式示例')
  .fontSize(20)             // 字体大小，单位为fp（逻辑像素）
  .fontWeight(FontWeight.Bold)  // 字体粗细：Bold/Medium/Normal/Light
  .fontStyle(FontStyle.Italic)  // 字体样式：Normal/Italic
  .fontFamily('sans-serif')     // 字体族：sans-serif/serif等
  .textColor('#FF0000')         // 文本颜色

文本布局

Text('这是一段较长的文本，用于演示文本对齐和换行效果。')
        .width(300)                // 文本宽度
        .textAlign(TextAlign.Center) // 文本对齐：Left/Right/Center/Start/End
        .lineHeight(30)            // 行高
        .maxLines(2)               // 最大行数
        .textOverflow({ overflow: TextOverflow.Ellipsis }) // 文本溢出显示 ...

装饰线

Text('带下划线的文本')
  .decoration({ type: TextDecorationType.Underline, color: '#0000FF' })

Text('带删除线的文本')
  .decoration({ type: TextDecorationType.LineThrough })

高级用法

文本选择与复制

Text('这段文本可以被选中和复制')
        .textSelectable(TextSelectableMode.SELECTABLE_FOCUSABLE)  // 允许文本被选中
        .copyOption(CopyOptions.InApp) // 复制权限：InApp/All/Never

文本间距

Text('设置字间距和字母间距')
  .letterSpacing(4)  // 字母/字符间距）

总结

  • Text 组件是构建UI的基础，几乎所有应用都离不开文本展示
  • 使用 @State 装饰器可以实现文本内容的动态更新
  • 合理设置 maxLines 和 textOverflow 可以避免文本显示超出预期
  • 富文本功能适合实现复杂的文本排版效果
  • 文本选择和复制功能提升了用户体验

通过组合使用这些属性和方法，可以满足各种文本展示需求，从简单的标签到复杂的富文本内容都能轻松实现。

原文出处：/show_1GW1xnV7R1LA.html

吉ICP备15003043号