【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'
})
}
}
}
}