HarmonyOS实战开发-如何使用textOverflow和maxLines()实现昵称的长文本省略展示功能。

介绍

本示例实现了回复评论时，当回复人的昵称与被回复人的昵称长度都过长时，使用textOverflow和maxLines()实现昵称的长文本省略展示的功能。

效果图预览

使用说明

1. 点击评论中的"回复"，在输入框中输入回复内容，点击发送，即可在下方增加一条子评论。
2. 子回复列表的展示样式xxxxxx…>xxxxx…，此时回复人的昵称与被回复人的昵称长度都过长，将两方的名字都省略展示的样式，效果如下。

实现思路

场景：通过textOverflow.Ellipsis与maxLines()实现长文本省略

• 通过textOverflow属性控制文本超长处理，textOverflow需配合maxLines一起使用（默认情况下文本自动折行）。当设置overflow: TextOverflow.Ellipsis时，此时超长文本中超出的部分显示省略号。
• 本案例中长文本省略的展示样式为xxxxxx…>xxxxx…，当同时设定回复人和被回复人昵称的文本属性.maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis })时,如果回复人和被回复人的昵称超出设定的长度则会以省略号展示。从而实现长文本超长部分省略效果。

Text(reply.user) // 回复人昵称
  .maxLines(1)
  // TODO：知识点：通过设定maxLines为1与textOverflow为Ellipsis表明最大行数为1行，超出宽度30%的部分为省略号
  .textOverflow({ overflow: TextOverflow.Ellipsis })
  .width("30%")
Image($r('app.media.right'))
  .objectFit(ImageFit.Contain)
  .width($r('app.integer.text_flow_font_size'))
  .height($r('app.integer.text_flow_font_size'))
Text(reply.replyUser) // 被回复人昵称
  .maxLines(1)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
  .width("30%")

工程结构&模块类型

  textoverflow                                     // har包
   |---model
   |   |---TextFlowMode.ets                         // 模型层-评论数据类 
   |---mainpage
   |   |---CommentInputDialog.ets                   // 视图层-自定义弹窗
   |   |---CommentPage.ets                          // 视图层-评论组件
   |   |---TextOverflowPage.ets                     // 视图层-主页
   |---mock
   |   |---DetailData.ets                           // 模拟数据模块

模块依赖

routermodule

utils

高性能知识点

• 动态加载数据场景可以使用LazyForEach遍历数据。
• 本例使用扁平化布局优化嵌套层级，建议采用相对布局RelativeContainer进行扁平化布局，有效减少容器的嵌套层级，减少组件的创建时间。

参考资料

RelativeContainer

textOverflow

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、相关教学视频》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……