HarmonyOS 鸿蒙Next 有没有一种组件可以实现折叠效果
HarmonyOS 鸿蒙Next 有没有一种组件可以实现折叠效果
有没有一种组件可以实现折叠效果。 多行文本时只显示一行,其余文本折叠起来,点击图标折叠起来的文本进行展开。
2 回复
没有专门的组件去实现这个效果,可以参考如下代码示例,修改最大显示行数 lines的值来调整文本几行展示的效果。:
[@Entry](/user/Entry)
[@Component](/user/Component)
struct SearchPage {
[@State](/user/State) isShow: boolean = false
[@State](/user/State) ht: number = 100
[@State](/user/State) textHt: number = 20
build() {
Column({ space: 10 }) {
Text(‘点击:属性动画折叠’).onClick(() => {
this.ht = this.ht == 0 ? 100 : 0
this.textHt = this.textHt == 0 ? 20 : 0
}).width(‘100%’)
Column() {
Text(‘我是文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本’).width(‘100%’)
.height(this.textHt)
.animation({
duration: 300,
curve: Curve.Linear
})
}
.height(this.ht)
.width(‘100%’)
.animation({
duration: 300,
curve: Curve.Linear
})
.backgroundColor(’#ff0000’)
.alignItems(HorizontalAlign.Start)
Text(<span class="hljs-string">'点击:显式动画折叠'</span>).onClick(() => {
animateTo({
duration: <span class="hljs-number">300</span>,
curve: Curve.Linear
}, () => {
<span class="hljs-keyword">this</span>.textHt = <span class="hljs-keyword">this</span>.textHt == <span class="hljs-number">0</span> ? <span class="hljs-number">20</span> : <span class="hljs-number">0</span>
<span class="hljs-keyword">this</span>.ht = <span class="hljs-keyword">this</span>.ht == <span class="hljs-number">0</span> ? <span class="hljs-number">100</span> : <span class="hljs-number">0</span>
})
}).width(<span class="hljs-string">'100%'</span>)
Column() {
Text(<span class="hljs-string">'我是文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本'</span>)
.height(<span class="hljs-keyword">this</span>.textHt)
}
.height(<span class="hljs-keyword">this</span>.ht)
.width(<span class="hljs-string">'100%'</span>)
.animation({
duration: <span class="hljs-number">300</span>,
curve: Curve.Linear
})
.backgroundColor(<span class="hljs-string">'#ff0000'</span>)
.alignItems(HorizontalAlign.Start)
}
}
}