HarmonyOS NEXT实战：文本展开和折叠

Question

[##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##]

核心概念：

Text是文本组件，用于展示用户视图，如显示文章的文字内容。该组件支持绑定自定义文本选择菜单，用户可根据需要选择不同功能。此外，还可以扩展自定义菜单，丰富可用选项，进一步提升用户体验。Span则用于展示行内文本。

Text.maxLines接口

maxLines(value: number)

设置文本的最大行数。
默认情况下，文本是自动折行的，如果指定此属性，则文本最多不会超过指定的行。如果有多余的文本，可以通过textOverflow来指定截断方式。

Text.textOverflow接口

textOverflow(options: TextOverflowOptions)

设置文本超长时的显示方式。

当TextOverflowOptions设置为TextOverflow.None、TextOverflow.Clip或TextOverflowEllipsis时：

设置为TextOverflow.None、TextOverflow.Clip，文本超长时按最大行截断显示。
设置为TextOverflow.Ellipsis，文本超长时显示不下的文本用省略号代替。
需配合maxLines使用，单独设置不生效。
断行规则参考wordBreak。默认情况下参考WordBreak.BREAK_WORD的截断方式，文本截断按字进行。例如，英文以单词为最小单位进行截断。若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B，或者设置WordBreak.BREAK_ALL。
折行规则参考lineBreakStrategy。该属性在wordBreak不等于WordBreak.BREAK_ALL的时候生效，不支持连词符。
从API version 11开始，建议优先组合textOverflow和wordBreak属性来设置截断方式，具体详见示例4设置文本断行及折行、如何解决Text组件文本为中文、数字、英文混合时显示省略号截断异常的问题。

this.getUIContext().getMeasureUtils().measureTextSize

static measureTextSize(options: MeasureOptions): SizeOptions

计算指定文本的宽度和高度。

实战示例代码

@Entry
@Component
struct TextUnfoldingAndFoldingPage {
  build() {
    Column({ space: 6 }) {
      Text('文本展开和折叠')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      TextContentComponent({
        text: '键值型数据库存储键值对形式的数据，当需要存储的数据没有复杂的关系模型，比如存储商品名称及对应价格、员工工号及今日是否已出勤等，由于数据复杂度低，更容易兼容不同数据库版本和设备类型，因此推荐使用键值型数据库持久化此类数据。'
      })
        .margin(20)
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct TextContentComponent {
  @Prop text: ResourceStr
  @State isOverflow: boolean = false
  @State isExpand: boolean = false

  aboutToAppear(): void {
    let textActualSize: SizeOptions = this.getUIContext().getMeasureUtils().measureTextSize({
      textContent: this.text,
      maxLines: 2
    });
    let textSize: SizeOptions = this.getUIContext().getMeasureUtils().measureTextSize({
      textContent: this.text
    });

    if (textSize.height && textActualSize.height && textSize.height > textActualSize.height) {
      this.isOverflow = true
    } else {
      this.isOverflow = false
    }
  }

  build() {
    Column() {
      Text(this.text)
        .maxLines(this.isExpand ? 999 : 2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .width('100%')
      Text(this.isExpand ? '收起' : '展开')
        .fontColor('#0a59f7')
        .fontWeight(500)
        .onClick(() => {
          this.isExpand = !this.isExpand
        })
    }
    .width('100%')
    .height('100%')
    .layoutWeight(1)
    .alignItems(HorizontalAlign.End)
  }
}