HarmonyOS Text包裹n个span,如何判断Text组件出现Ellipsized,或者超过几行呢

HarmonyOS
2025-01-09 15:53:16
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可以使用组件getlinecount获取行数信息,参考链接:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-text-common-V5#getlinecount

demo如下:

import { curves } from '@kit.ArkUI'

@Entry
@Component
struct TextExample9 {
  @State lineCount: string = ""
  @State collapseText: string = '...展开全文'
  @State longMessage: string =
    "  我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字。\n" +
      "\n" +
      "  我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字我是段落文字。\n"
  @State disMessage: string = '我是热搜词条4'
  @State lines: number = 3;
  controller: TextController = new TextController()
  @State flag: boolean = true;
  @State listen: boolean = true;

  build() {
    Scroll() {
      Column() {
        Stack({ alignContent: Alignment.BottomEnd }) {
          Text(undefined, { controller: this.controller }) {
            Span(this.disMessage)
            Span(this.disMessage)
            ImageSpan($r('app.media.startIcon')).height(25)
            Span(this.longMessage)
          }
          .fontSize(15)
          .maxLines(this.lines)
          .onAreaChange(() => {
            let layoutManager: LayoutManager = this.controller.getLayoutManager()
            this.flag = layoutManager.getLineCount() < 3 ? false : true; //
          })

          if (this.flag) {
            Row() {
              Text(this.collapseText)
                .fontSize(15)
                .backgroundColor(Color.White)
            }
            .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行
                })
              }
            })
          }
        }
        .margin({ top: 100, left: 8, right: 8 })
      }
    }
  }
}
分享
微博
QQ
微信
回复
2025-01-09 18:00:52
相关问题
HarmonyOS Text/Span使用问题
658浏览 • 1回复 待解决
HarmonyOS如何测量Text组件的宽度
633浏览 • 1回复 待解决
HarmonyOS Text中的Span显示问题
781浏览 • 1回复 待解决
HarmonyOS Text中的ImageSpan和Span
822浏览 • 1回复 待解决
HarmonyOS TextSpan不支持align
246浏览 • 1回复 待解决
HarmonyOS Text内部Span的宽度设置无效
270浏览 • 1回复 待解决
HarmonyOS Text中的span不能设置间距吗
243浏览 • 1回复 待解决
HarmonyOS 使用Text里套Span标签使用问题
717浏览 • 1回复 待解决
HarmonyOS Text内的Span有办法底部对齐吗
189浏览 • 1回复 待解决