HarmonyOS NEXT project practice：Text unfolding and folding

[##HarmonyOS Next project practice##HarmonyOS SDK service##education##]

Core concepts：

Text is a text component used to display user views, such as displaying the textual content of an article. This component supports binding custom text selection menus, allowing users to choose different functions according to their needs. In addition, custom menus can be expanded to enrich available options and further enhance the user experience. Span is used to display text within a line.

Text.maxLines interface

maxLines(value: number)

Set the maximum number of lines for text.
By default, text is automatically folded into rows. If this property is specified, the text will not exceed the specified number of rows at most. If there is extra text, you can specify the truncation method through textOverflow.

Text.textOverflow interface

textOverflow(options: TextOverflowOptions)

Set the display mode when the text is too long.

When TextOverflowOptions is set to TextOverflow-None, TextOverflow.Clip, or TextOverflowEllipsis:

• Set to TextOverflow. None, TextOverflow. Clip, and display as maximum line truncation when the text is too long.
• Set to TextOverflow. Ellipsis, replace text that cannot be displayed when it is too long with ellipses.
• It needs to be used in conjunction with maxLines, and setting it separately will not take effect.
• The break rule refers to wordBreak. By default, the truncation method is based on WordBreak.BREAK_WORD, where text is truncated by word. For example, English is truncated using words as the smallest unit. If truncation is required on a letter by letter basis, zero width spaces can be added between letters: \ u200B, or WordBreak.BREAK_ALL can be set.
• Refer to lineBreakStrategy for the rules of folding. This attribute takes effect when wordBreak is not equal to WordBreak.BREAK_ALL and does not support conjunctions.
• Starting from API version 11, it is recommended to prioritize combining the textOverflow and wordBreak properties to set truncation methods. For details, please refer to Example 4 on setting text line breaks and breaks, and how to solve the problem of ellipsis truncation exceptions when the text in the Text component is a mixture of Chinese, numbers, and English.

this.getUIContext().getMeasureUtils().measureTextSize

static measureTextSize(options: MeasureOptions): SizeOptions

Calculate the width and height of the specified text.

Practical example code

@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)
  }
}