Text实现展开收起,实现文本的展开收起的功能,收起全文可以跟随在文本的末尾,而不是放置在固定的位置。

实现文本的展开收起的功能,收起全文可以跟随在文本的末尾,而不是放置在固定的位置。

HarmonyOS
2024-05-26 14:04:56
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
milchcow

使用的核心API

@ohos.measure (文本计算)

Text

核心代码解释

import measure from '@ohos.measure' 
 
@Entry 
@Component 
struct TextCollapseTest { 
  @State rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排。从2月9日(除夕)00:00到2月17日(正月初八)24:00,免费9天。" 
  @State title: string = this.rawTitle 
  @State suffixStr: string = "" 
  expanded: Boolean = true 
  titleWidth: number = 350 
  needProcess: boolean = true 
  ellipsis: string = "..." 
  EXPAND_STR: string = "展开" 
  COLLAPSE_STR: string = "收起" 
  MAX_LINES: number = 2; 
 
  aboutToAppear(): void { 
    this.process(); 
  } 
 
  process(): void { 
    if (this.expanded) { 
      this.collapseText(); 
    } else { 
      this.expandText(); 
    } 
  } 
 
  //展开文本 
  expandText(): void { 
    console.log('testTag: ' + this.needProcess); 
    if (this.needProcess) { 
      this.suffixStr = this.COLLAPSE_STR; 
      this.expanded = true; 
      this.title = this.rawTitle; 
    } 
  } 
 
  //收起文本 
  collapseText(): void { 
    if (!this.needProcess) { 
      return; 
    } 
    let titleSize: SizeOptions = measure.measureTextSize({ 
      textContent: this.rawTitle, 
      constraintWidth: this.titleWidth, 
      fontSize: 30 
    }) 
    let twoLineSize: SizeOptions = measure.measureTextSize({ 
      textContent: this.rawTitle, 
      constraintWidth: this.titleWidth, 
      fontSize: 30, 
      maxLines: this.MAX_LINES 
    }) 
    //文本未超过限制行数,不进行展开、收起处理 
    if ((titleSize.height as number) == (twoLineSize.height as number)) { 
      this.needProcess = false; 
      return; 
    } 
 
    console.log('test row height:' + titleSize.height) 
    console.log('test twoLineSize height:' + twoLineSize.height) 
 
    let clipTitle: string = this.rawTitle 
    this.suffixStr = this.EXPAND_STR; 
    while ((titleSize.height as number) > (twoLineSize.height as number)) { 
      this.expanded = true; 
      // 可以修改其他计算算法提高性能 
      clipTitle = clipTitle.substring(0, clipTitle.length - 1); 
      titleSize = measure.measureTextSize({ 
        textContent: clipTitle + this.ellipsis + this.suffixStr, 
        constraintWidth: this.titleWidth, 
        fontSize: 30 
      }) 
      console.log("test while clipTitle:" + clipTitle) 
      console.log("test while clipTitle height:" + titleSize.height) 
    } 
    console.log("test clipTitle:" + clipTitle) 
    this.title = clipTitle + this.ellipsis 
    this.expanded = false; 
  } 
 
  build() { 
    Row() { 
      Column() { 
        Text() { 
          Span(this.title) 
          if (this.needProcess) { 
            Span(this.suffixStr) 
              .fontColor(Color.Orange) 
              .onClick((event) => { 
                this.process(); 
              }) 
          } 
        } 
        .fontSize(30) 
        .fontWeight(FontWeight.Bold) 
        .id("title") 
        .width(this.titleWidth) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-27 17:03:05
相关问题
如何实现文本展开收起功能
145浏览 • 1回复 待解决
ArkTS实现Text文本【...展开
342浏览 • 1回复 待解决
多行文本省略展开与显示
362浏览 • 1回复 待解决
Text怎么显示带html标签文本
2902浏览 • 1回复 待解决
Text怎么解析展示带html标签文本
1379浏览 • 1回复 待解决
基于measure实现文本测量
137浏览 • 1回复 待解决
如何实现文本类型倒计时
347浏览 • 0回复 待解决
文本web组件中无法展示
455浏览 • 1回复 待解决
JS中input值文本对齐该如何实现
6873浏览 • 1回复 待解决
如何实现文本竖向排列
786浏览 • 1回复 待解决
通过Native 调用c++层实现文本绘制
438浏览 • 1回复 待解决