《鸿蒙开发-答案之书》全文收起展开功能-CSDN博客

本文链接：https://blog.csdn.net/u010074743/article/details/145050908

《鸿蒙开发-答案之书》全文收起展开功能

类似Android的全文收起，展开功能。不过比Android的难些，就是这宽度不好算

直接上代码：

@Component
export  struct ExpandText {
  // 长文本
  @Prop longMessage: string = ''
  // 最大显示行数
  @State lines: number = 3;
  // 长文本状态（展开 or 收起）
  @State collapseText: string = '展开全文'
  // 屏幕宽度（单位px）
  lineWidth: number = 0;
  fontSize:number = 14
  fontColor:ResourceColor = $r('app.color.color_222')
  // 是否需要显示"展开"字样（注：当文本长度较短时就不需要“展开”）
  @State isExpanded: boolean = false
  // 测量文本宽度（单位px）
  @State textWidth: number = measure.measureText({
    textContent: this.longMessage,
    fontSize: this.fontSize
  })

  aboutToAppear() {
    console.info(`文本宽度为：${this.textWidth}`)
    let displayClass = display.getDefaultDisplaySync();
    //单位为像素
    this.lineWidth = this.lineWidth > 0?this.lineWidth:displayClass.width;
    // 屏幕宽度 * 最大行数 * 组件宽度比例 和 文字测量宽度
    this.isExpanded = this.lineWidth * this.lines  <= this.textWidth
  }

  build() {
    Row() {
      Column() {
        if (this.isExpanded) {
          Stack({ alignContent: Alignment.BottomEnd }) {
            Text(this.longMessage)
              .fontSize(this.fontSize)
              .fontColor(this.fontColor)
              .maxLines(this.lines)
              .width('100%')
            Row() {
              Text(this.collapseText)
                .fontSize(this.fontSize)
                .backgroundColor(Color.White)
                .fontColor($r('app.color.color_main'))
            }
            .padding({
              right:8
            })
            .justifyContent(FlexAlign.End)
            .onClick(() => {
              if (this.collapseText == '展开全文') {
                this.collapseText = '收起';
                // 展开动画
                animateTo({
                  duration: 150,
                  curve: curves.springMotion(0.5, 0.8),
                }, () => {
                  this.lines = -1; // 使得设置的最大行属性无效
                })
              } else {
                this.collapseText = '展开全文';
                // 收起动画
                animateTo({
                  duration: 100,
                  curve: Curve.Friction,
                }, () => {
                  this.lines = 3; // 只显示3行
                })
              }
            })
          }
        } else {
          Text(this.longMessage)
            .fontSize(this.fontSize)
            .fontColor(this.fontColor)
            .width('100%')
        }
      }
      .width('100%')
    }
  }
}