【HarmonyOS NEXT】超简单方法实现Text组件展开/收起

【HarmonyOS NEXT】超简单方法运用Text组件自带属性函数实现展开/收起

笔者在学习时发现网上很多方法实现的Text组件展开/收起效果比较复杂，且涉及到计算，于是查阅了相关文档，尝试通过Text组件自带的属性函数实现需求，以下为解决方案：

1. 效果展示

2. 核心属性方法

2.1 maxLines

maxLines(value: number)
设置文本的最大行数。默认情况下，文本是自动折行的，如果指定此属性，则文本最多不会超过指定的行。如果有多余的文本，可以通过textOverflow来指定截断方式。

2.2 wordBreak

wordBreak(value: WordBreak)
设置断行规则。WordBreak.BREAK_ALL与{overflow: TextOverflow.Ellipsis}，maxLines组合使用可实现英文单词按字母截断，超出部分以省略号显示

2.3 textOverflow

textOverflow(value: { overflow: TextOverflow })
设置文本超长时的显示方式。

2.4 代码实现

Text(this.text)
	.maxLines(this.summaryLine)
    .wordBreak(WordBreak.BREAK_WORD)
    .textOverflow({overflow:TextOverflow.Ellipsis})

3. 自定义组件（可选）

为了方便使用，笔者自定义了一个ExpandableText组件，需要传入两个参数：
summaryLine:number表示收起状态下显示的行数；
text:string表示文本内容。
具体代码如下：

@Component
export struct ExpandableText {
  @Prop summaryLine:number
  @Prop text:string
  @State is_expanded:boolean = false
  @State symbol:string = 'sys.symbol.text_and_arrow_down'
  build() {
    Column(){
      if (this.is_expanded){
        Row(){
          Text(){
            SymbolSpan($r(this.symbol)).fontWeight(FontWeight.Bold)
          }
          Text(this.text)
        }.alignItems(VerticalAlign.Top)
        .onClick(()=>{
          this.is_expanded = false
          this.symbol = 'sys.symbol.text_and_arrow_down'
        })
      }
      else {
        Row(){
          Text(){
            SymbolSpan($r(this.symbol)).fontWeight(FontWeight.Bold)
          }
          Text(this.text)
            .maxLines(this.summaryLine)
            .wordBreak(WordBreak.BREAK_WORD)
            .textOverflow({overflow:TextOverflow.Ellipsis})
        }.onClick(()=>{
          this.is_expanded = true
          this.symbol = 'sys.symbol.text_and_arrow_up'
        })
      }
    }
  }
}