鸿蒙中Text组件的展开和收起效果

本文主要是介绍鸿蒙中Text组件的展开和收起效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言：

DevEco Studio版本：4.0.0.600

效果：

 

原理分析：

通过效果图我们知道，可以将‘...展开’ 盖在文本内容的的右下角来实现这个效果。那么要实现盖上的效果可以通过层叠布局（Stack）来实现，通过alignContent属性：BottomEnd配置到右下角。

通过动态设置Text的maxLines来控制显示行数和全部显示。maxLines(-1)表示不限制行数

详细代码：

@Entry
@Component
struct Index {@State isUnfold: boolean = false@State longMessage: string = "\t\t豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。" +"雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。" +"腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。"build() {Stack({ alignContent: Alignment.BottomEnd }) {Text(this.isUnfold ? this.longMessage + '\n ' : this.longMessage).fontSize(20).textOverflow({ overflow: TextOverflow.None }).maxLines(this.isUnfold ? -1 : 3)Text(this.isUnfold ? '...收起' : '...展开').width(60).fontSize(20).fontColor(Color.Blue).backgroundColor(Color.White).onClick(() => {this.isUnfold = !this.isUnfold})}.margin({ top: 50 })}
}

弊端：

通过效果图可以看到是实现了我们的业务需求，但是当“雄州雾列，”为数字或字母等时，会出现内容没有盖全的情况，主要原因是给Text('...展开').width(60)，默认是占三个文字大小（每个文字大小（20）* 3 = 60）和数字实际宽度不相等。

目前针对上面的弊端还没有很好的处理方式，如果大家有更好的实现方式欢迎大家留言

这篇关于鸿蒙中Text组件的展开和收起效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---