HarmonyOS Text怎么实现超过3行的时候,怎么实现展开收缩

Text怎么实现超过3行的时候,内容最大行数显示3行以…结尾并出现展开,点击展开显示全部内容并出现收缩,点击的时候又回到开始状态,如果不超过3行的时候,有多少就显示多少,不出现展开

HarmonyOS
2024-12-25 13:05:23
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

示例参考如下:

先在onWindowStageCreate时,计算下屏幕宽度,存在AppStorage中(注意:需要转成vp单位),样例代码如下:

let windowClass: window.Window | undefined = undefined;
display.getAllDisplays((err, data) => {
  AppStorage.setOrCreate('screenwidth', px2vp(data[0].width));
  console.log('width = ' + data[0].width)
})

然后在页面通过 @StorageLink 获取屏幕宽度,如果要按百分比,可以再定义个参数作为屏幕宽度*百分比,样例代码如下:

@StorageLink('screenwidth') screenWidth: number = 0;
@State custwidth: number = this.screenWidth * 0.8

后面设置宽度就用定义的参数 custwidth 来设置。页面完整示例代码如下:

import { MeasureText } from '@kit.ArkUI'
import componentUtils from '@ohos.arkui.componentUtils'
import inspector from '@ohos.arkui.inspector'

@Entry
@Component
struct TextButton {
  @State content: string = '#限定的校服,限定的青春!那群陪你度过青涩阳光的人,你还记得他们吗?12月15日中午12点,一起来重拾回忆'
  private measureText = this.content;
  @State maxLines: number = Infinity
  @State isCollapse: boolean = true;
  @State collapseTxt: string = '…[展开]';
  private subTxt: string = '';
  @StorageLink('screenwidth') screenWidth: number = 0;
  @State custwidth: number = this.screenWidth * 0.8

  //限定宽度,计算文本总高度
  textSize : SizeOptions = MeasureText.measureTextSize({
    textContent: this.content,
    fontSize: 24,
    constraintWidth: this.custwidth
  })

  //限定宽度和最大行数,计算高度
  textSize2 : SizeOptions = MeasureText.measureTextSize({
    textContent: this.content,
    fontSize: 24,
    maxLines: 3,
    constraintWidth: this.custwidth
  })

  build() {
    Row() {
      Column() {
        Text() {
          Span('#亲爱的朋友')
            .fontColor(Color.Blue)
          Span(this.content)


          if(Number(this.textSize.height) > Number(this.textSize2.height)){
            Span(this.collapseTxt)
              .onClick(()=>{
                if(this.isCollapse){
                  this.maxLines = Infinity;
                  this.content = this.measureText;
                  this.isCollapse = false;
                  this.collapseTxt = '[收起]';
                }else{
                  this.isCollapse = true;
                  this.collapseTxt = '…[展开]';
                  this.content = this.subTxt;
                }
              })
          }
        }
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(this.maxLines)
        .fontSize(24)
        .width(this.custwidth)
        .backgroundColor(Color.White)
        .key('txt_info')
      }
      .width('100%')
    }
    .height('100%')
  }

  listener:inspector.ComponentObserver = inspector.createComponentObserver('txt_info')

  aboutToAppear() {
    let onLayoutComplete:()=>void=():void=>{
      if(this.isCollapse){
        this.getComponentRect('txt_info');
      }
    }
    let onDrawComplete:()=>void=():void=>{
      if(this.isCollapse){
        this.subTxt = this.content;
      }
    }
    let FuncLayout = onLayoutComplete
    let FuncDraw = onDrawComplete

    this.listener.on('layout', FuncLayout)
    this.listener.on('draw', FuncDraw)
  }


  private getComponentRect(key:string) {
    let modePosition = componentUtils.getRectangleById(key);

    let localOffsetHeight = modePosition.size.height;

    if(localOffsetHeight > 300){
      this.content = this.content.substring(0, this.content.length - 2);
      this.isCollapse = true;
    }
  }
}
分享
微博
QQ
微信
回复
2024-12-25 14:18:06
相关问题
ArkTS实现Text文本【...展开
1948浏览 • 3回复 待解决
HarmonyOS 如何实现超过自动截取
65浏览 • 1回复 待解决
Text实现scroll效果怎么弄?
6033浏览 • 1回复 待解决
HarmonyOS 如何实现半屏展开
572浏览 • 1回复 待解决
怎么折叠titlebar实现
4143浏览 • 1回复 待解决
HarmonyOS 横向菜单怎么实现
22浏览 • 1回复 待解决
鸿蒙闪屏页实现怎么实现
5035浏览 • 1回复 待解决