HarmonyOS 鸿蒙Next Text()组件设置文本最大行并添加[展开][收起]标签方法

HarmonyOS 鸿蒙Next Text()组件设置文本最大行并添加[展开][收起]标签方法 如下代码,虽然可以实现需求,但是不美观,可能会出现[半个字]的情况,所以还请各位帮忙看看有什么更好的解决办法~

@Entry
@Component
struct Index {
  @State isUnfold: boolean = false

  build() {
    if (this.isUnfold == false){
      Stack({ alignContent: Alignment.BottomEnd }) {
        Text('央视网消息（焦点访谈）：宪法是我国的根本大法，是治国安邦的总章程，是保持国家统一、民族团结、经济发展、社会进步和长治久安的法律基础。今年12月4日是第10个国家宪法日，12月1—7日是第6个宪法宣传周。今年宪法宣传周的主题是“大力弘扬宪法精神，建设社会主义法治文化”。10年来，我国通过组织丰富多样的宪法宣传学习主题活动，让宪法走进校园、走进农村、走进企事业单位，目的就是让大家尊崇宪法，让法治文化沁润人心，让人们都能知法学法守法用法。')
          .maxLines(3)
          .textOverflow({ overflow: TextOverflow.Clip })
        Text() {
          Span(' ...')
          Span('  展开').fontColor('#2667FF')
        }.backgroundColor('#ffffff').width(60).textAlign(TextAlign.Center).onClick(() => {
          this.isUnfold = true
        })
      }
    } else {
      Stack({ alignContent: Alignment.BottomEnd }) {
        Text('央视网消息（焦点访谈）：宪法是我国的根本大法，是治国安邦的总章程，是保持国家统一、民族团结、经济发展、社会进步和长治久安的法律基础。今年12月4日是第10个国家宪法日，12月1—7日是第6个宪法宣传周。今年宪法宣传周的主题是“大力弘扬宪法精神，建设社会主义法治文化”。10年来，我国通过组织丰富多样的宪法宣传学习主题活动，让宪法走进校园、走进农村、走进企事业单位，目的就是让大家尊崇宪法，让法治文化沁润人心，让人们都能知法学法守法用法。')
        Text('收起').fontColor('#2667FF').backgroundColor('#ffffff').width(60).textAlign(TextAlign.Center).onClick(() => {
          this.isUnfold = false
        })
      }
    }

  }
}

更多关于HarmonyOS 鸿蒙Next Text()组件设置文本最大行并添加[展开][收起]标签方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

在aboutToAppear中判断isExpanded是否为true无效! 手动设置为true就可以
这个也会存在显示[一半文字]的情况

​

​

更多关于HarmonyOS 鸿蒙Next Text()组件设置文本最大行并添加[展开][收起]标签方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


遮挡半个字的情况，用个左透明的渐变色？

或者计算文字宽度吧，逐行加到数组里，再渲染出来！

你好 请问是怎么弄呢 不太明白

还没实现，他给的代码依旧有【遮挡半个字】的情况，

这个方法我已经试过了，但是随着屏幕的变化，后面的字有时候是在同一行，有时候就会换行。

所以暂时也没有其他办法解决这种问题啦吧！

  1. 首先使用measure.measureText()方法测量实际文本宽度，接着使用display.getAllDisplays()获取手机屏幕宽度，然后用“屏幕宽度 * 最大行数 * 组件宽度比例”的结果和“实际文本宽度”进行比较大小，判断是否需要“…展开全文”；
  2. 当需要“…展开全文”时，只展示maxLines属性设置的固定高度的文本内容，当点击“…展开全文”时将该文本改成“…收起”并添加curves.springMotion曲线动画，同时在animateTo的显示动效的闭包函数中将maxLines属性值修改为-1使得该属性无效；
  3. 当需要“…收起”时，将collapseText的值改为“…展开全文”，并设置收起动画。

王求可可： 获取屏幕宽度可以修改下，计算内外边距会导致代码不好通用，建议通过 .onAreaChange，拿到父节点的宽~

用preview好像看不到效果，

王求可可：

遮挡半个字的情况，用个左透明的渐变色？

或者计算文字宽度吧，逐行加到数组里，再渲染出来！

measure.measureText

在HarmonyOS鸿蒙Next中，Text组件可以通过maxLines属性设置文本的最大显示行数。要实现文本的[展开][收起]功能，可以结合Text组件的onClick事件和状态管理来控制文本的显示行数。

  1. 设置最大行数：使用maxLines属性限制文本显示的行数。例如，设置maxLines={3}时，文本最多显示3行，超出部分会被截断。

  2. 添加[展开][收起]标签：通过状态变量控制maxLines的值。初始时，maxLines设置为3，文本显示为截断状态，并显示[展开]标签。点击[展开]标签后，将maxLines设置为null，文本完全展开，并显示[收起]标签。点击[收起]标签后，maxLines恢复为3，文本再次截断。

  3. 代码示例：

@Entry
@Component
struct TextExpandCollapse {
  @State isExpanded: boolean = false;

  build() {
    Column() {
      Text('这里是长文本内容，超出部分将被截断。这里是长文本内容，超出部分将被截断。')
        .maxLines(this.isExpanded ? null : 3)
        .onClick(() => {
          this.isExpanded = !this.isExpanded;
        });

      Text(this.isExpanded ? '[收起]' : '[展开]')
        .onClick(() => {
          this.isExpanded = !this.isExpanded;
        });
    }
  }
}

通过上述方法，可以在HarmonyOS鸿蒙Next中实现文本的[展开][收起]功能。

回到顶部