HarmonyOS 鸿蒙Next 段落文字支持最大行数展开全部,还能收起

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 段落文字支持最大行数展开全部,还能收起

段落文字支持最大行数展开全部,还能收起

3 回复

参考demo:

import measure from '@ohos.measure'
import curves from '@ohos.curves';
import { BusinessError } from '@ohos.base';
import display from '@ohos.display';

@Entry
@Component
struct Index {
  build() {
    Column() {
      MyText()
    }
  }
}

@Component
@Preview
export struct MyText { // 长文本
  @State longMessage: string =
    "走在繁华的城市街头,明空感到无比紧张。他的心跳如雷鼓般擂动着胸膛,使得身上的伪装仿佛随时都要被揭开。然而,他仍然保持着冷静,凭借着过人的胆识与智慧,成功地躲过了敌人的层层封锁。\n" +
      "\n" +
      "  最终,明空来到了敌对帮派的老巢。此时此刻,那里的守卫正沉浸在欢庆的氛围中,丝毫没有察觉到即将来临的危机。明空深吸一口气,压抑住内心的激动,悄然潜入了这座古老的建筑。" // 最大显示行数
  @State lines: number = 3; // 长文本状态(展开 or 收起)
  @State collapseText: string = '...展开全文' // 屏幕宽度(单位px)
  screenWidth: number = 0; // 是否需要显示"展开"字样(注:当文本长度较短时就不需要“展开”)
  @State isExpanded: boolean = false // 测量文本宽度(单位px)
  @State textWidth: number = measure.measureText({ textContent: this.longMessage, fontSize: 15 }) // 获取当前所有的display对象
  promise: Promise<Array<display.Display>> = display.getAllDisplays()

  aboutToAppear() {
    console.log(`文本宽度为:${this.textWidth}`)
    this.promise.then((data: Array<display.Display>) => {
      console.log(`所有的屏幕信息:${JSON.stringify(data)}`) //单位为像素
      this.screenWidth = data[0]["width"] // 屏幕宽度 * 最大行数 * 组件宽度比例 和 文字测量宽度
      this.isExpanded = this.screenWidth * this.lines * 0.8 <= this.textWidth
    }).catch((err: BusinessError) => {
      console.error(`Failed to obtain all the display objects. Code: ${JSON.stringify(err)}`)
    })
  }

  build() {
    Row() {
      Column() {
        if (this.isExpanded) {
            Column(){
              Stack({ alignContent: Alignment.TopStart }) {
                  Text('#标签')
                    .fontColor(Color.Blue)
                    .width('100%')
                  Text(this.longMessage)
                    .fontColor(Color.Black)
                    .maxLines(this.lines)
                    .width('100%')
                    .textIndent(50)
              }
              Row() {
                Text(this.collapseText).fontSize(15).backgroundColor(Color.White)
              }.width('100%').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(15).fontColor(Color.Black)
        }
      }.width('100%')
    }.height('100%')
  }
}

在HarmonyOS鸿蒙Next系统中,对于段落文字支持的最大行数展开与收起功能,通常是通过编程接口(API)或UI组件来实现的。这涉及到文本视图(TextView)或滚动视图(ScrollView)等控件的配置与编程逻辑。

要实现这一功能,开发者可以:

  1. 设置初始显示行数:通过属性设置或代码配置,限定TextView初始显示的行数。
  2. 添加展开/收起按钮:在UI布局中添加按钮,用于触发文本展开或收起的事件。
  3. 编写事件处理逻辑:为按钮添加点击事件监听器,在点击事件中根据当前状态切换TextView的显示行数(例如,从限定行数切换到全部行数,或从全部行数切换回限定行数)。
  4. 使用动画效果(可选):为了提升用户体验,可以在文本展开或收起时添加平滑的动画效果。

这一过程需要开发者具备一定的编程能力和对HarmonyOS开发框架的了解。如果在实际开发中遇到问题,可以检查TextView的属性设置、事件监听器的绑定以及逻辑处理的正确性。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部