HarmonyOS 鸿蒙Next 段落文字支持最大行数展开全部,还能收起
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%')
}
}
能搞定