HarmonyOS 鸿蒙Next中text文本溢出自定义

【背景知识】

文本折叠与展示的设计模式广泛应用于多个场景，主要通过隐藏非关键信息提升界面简洁性，同时允许用户主动展开查看细节。

典型场景如下：

• 长文档阅读：在处理长而复杂的文档时，用户可以通过折叠除关注部分以外的所有内容，使文档更加简洁易读。
• 信息展示平台：在信息展示平台如新闻网站、博客或论坛中，文本折叠可以让用户先看到摘要或概要，感兴趣时再展开详细内容。

maxLines：用于设置文本的最大行数，默认情况下，文本是自动折行的，如果指定此属性即可实现文本的折叠。

[@ohos.measure](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-measure)：可以计算文本的高度和宽度，截取文本来实现文本的折叠。

【解决方案】

方案一：使用maxLines属性实现，当文本收起时，通过设置maxLines=-1即可实现文本的展开；当文本展开时，通过设置maxLines=2即可实现文本的收起，限制行数为2行（可根据需要设置不同行数）。

完整代码示例如下：

// 收起文本显示行数
const COLLAPSE_LINES: number = 2;
const FONT_SIZE: number = 15;
const ELLIPSIS: string = '...';
const EXPAND_TEXT: string = '展开';
const COLLAPSE_TEXT: string = '收起';
const FULL_TEXT: string =
  '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.'

@Entry
@Component
struct expandCollapse {
  @State suffixStr: string = EXPAND_TEXT;
  @State longMessage: string = FULL_TEXT;
  @State lines: number = COLLAPSE_LINES;
  controller: TextController = new TextController()

  build() {
    Scroll() {
      Column() {
        Stack({ alignContent: Alignment.BottomEnd }) {
          Text(undefined, { controller: this.controller }) {
            Span(this.longMessage)
          }
          .fontSize(FONT_SIZE)
          .maxLines(this.lines)

          Row() {
            Row() {
              Text(this.suffixStr == EXPAND_TEXT ? ELLIPSIS : '')
              Text(this.suffixStr)
                .fontSize(FONT_SIZE)
                .fontColor(Color.Orange)
            }
            .backgroundColor(Color.White)
          }
          .justifyContent(FlexAlign.End)
          .onClick(() => {
            if (this.suffixStr == EXPAND_TEXT) {
              this.suffixStr = COLLAPSE_TEXT;
              // 使得设置的最大行属性无效
              this.lines = -1;
            } else {
              this.suffixStr = EXPAND_TEXT;
              this.lines = COLLAPSE_LINES;
            }
          })
        }
        .margin({ top: 100, left: 8, right: 8 })
      }
    }
  }
}

方案二：使用[@ohos.measure](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-measure)计算文本总体的高度和文本收起的高度，并通过截取文本来实现展开收起效果，详情可参考文字展开收起案例。

【常见FAQ】

Q：展开收起效果比较突兀，有优化效果么？ A：可以在点击时添加animateTo动画。

Q：如何设置文本过长时自动截断？ A：可以通过textoverflow属性设置自动截断，文本截断规则可以通过wordBreak设置。