鸿蒙应用开发：仿微博文本折叠功能实现

仿微博文本折叠

概述

列表中的博文、评论等复合型内容组件，在文本行数超过预设阈值时，触发'展开''收起'的功能。内容收起时，如果有用'图片'展示'表情'的功能场景，由于图片出现的位置和大小都不固定，在收起展开时，截止到文字结尾的位置不好判断。

本文将介绍解决这一问题的基本逻辑和解决方案，帮助开发者使用系统自带模块，更简洁地解决问题。

纯文本展开折叠

场景描述

在示例列表中显示纯文本展开和收起功能，文本与按钮的显示变化。

1. 文本中只有文字。
2. 超出 2 行要能显示'…展开'，展开后显示收起。

实现原理

需要计算出'…'前最后一个文字的索引和显示行高，以确定'收起''展开'按钮的位置。计算文本高度，结合按钮和'…'的宽度，计算收起文本最后一个文字的坐标，换算为对应内容索引，截断显示相应的内容。

分别添加'收起''展开'按钮及交互，进行文本截断内容和全部内容展示的切换。

本示例使用 measureTextSize() 方法判断文字的高度，API20 新增 getParagraphs20+ 方法测算文本。getParagraphs() 方法代码量更少，更直观地获取显示行数。

开发步骤

1. 获取文本尺寸：
   • 使用 this.uiContext.getMeasureUtils().measureTextSize 方法计算文本的尺寸。参数包括文本内容、行高、布局宽度和字体大小。
   • 结果存储在 titleSize 变量中，特别是文本的高度。
2. 转换高度单位：
   • 使用 this.getUIContext().px2vp 方法将文本高度从像素单位转换为视口单位。
3. 判断是否需要处理：
   • 如果文本高度小于等于两倍的行高，则不需要进一步处理，将 this.textModifier.needProcess 设置为 false，并将标题设置为当前文本。
   • 否则，将 this.textModifier.needProcess 设置为 true，表示需要进一步处理。
4. 处理文本展开/折叠：
   • 如果 this.expanded 为 true，则调用 this.collapseText() 方法折叠文本。
   • 否则，调用 this.expandText() 方法展开文本。
5. 测量文本尺寸工具：通过 uiContext?.getMeasureUtils() 获取一个测量工具对象。
6. 存储高度信息：将测量得到的高度信息存储在变量 minHeight 中。如果高度未定义，minHeight 将为 undefined。
7. 初始化文本：
   • 使用 TextUtils.getStringFromResource 方法从资源中获取文本内容，并将其存储在 text 变量中。
8. 二分查找算法：
   • 将文本字符串分割成字符数组 textStr，并初始化左右指针 leftCursor 和 rightCursor。
   • 使用二分查找算法在文本中查找合适的切割点。每次迭代中，计算中间位置 cursor，并生成临时文本 tempTitle。