xugenyuan

ref |> 临时解决评论内容带折行且超过3行时 无法展开收起问题

Signed-off-by: xugenyuan <xugenyuan@wondertek.com.cn>
... ... @@ -6,8 +6,10 @@ import display from '@ohos.display';
const collapseString = '...展开全文'
const uncollapseString = '...收起'
const TestLongText = "超过三行超\n过三行超过\n三行超超过三行\n超过三行超过三行超过三\n行超过"
@Component
@Preview
// @Preview
export struct CommentText {
// 长文本
@State longMessage: string = ''
... ... @@ -26,6 +28,7 @@ export struct CommentText {
@State expandedStates: boolean = false;
@State fontSize: number = 18;
@State fontWeight: FontWeight = FontWeight.Regular
@State lineHeight: number = 24
fontColor: ResourceColor = $r('app.color.color_222222')
// 测量文本宽度(单位px)
@State textWidth: number = 0;
... ... @@ -37,6 +40,8 @@ export struct CommentText {
promise: Promise<Array<display.Display>> = display.getAllDisplays()
aboutToAppear() {
// this.longMessage = TestLongText
console.log(`文本宽度为:${this.textWidth}`)
let padding = vp2px(5 + this.marginWidth)
... ... @@ -58,6 +63,17 @@ export struct CommentText {
this.isExpanded = (this.screenWidth - padding) * this.lines <= this.textWidth
// this.expandedStates = this.isExpanded;
let lines = this.getTextLineNum(
this.longMessage,
(this.screenWidth - padding),
this.lineHeight,
this.fontSize,
this.fontWeight
)
if (lines > 3) {
this.isExpanded = true
}
//需要展开的话计算3行需要显示的文字
if (this.isExpanded) {
... ... @@ -76,13 +92,25 @@ export struct CommentText {
wordBreak:WordBreak.BREAK_ALL
})
let size = this.topMeasureText(
string,
(this.screenWidth - padding),
this.lineHeight,
this.fontSize,
this.fontWeight,
WordBreak.BREAK_ALL)
let height: number = Number(size.height)
let lines = Math.ceil(px2vp(height) / this.lineHeight)
//计算有误差20
if (thisTextWidth >= maxLineTextWidth) {
if (thisTextWidth >= maxLineTextWidth || lines > 3) {
// if (this.maxLineMesssage.endsWith('\n')) {
// this.maxLineMesssage = this.maxLineMesssage.slice(0, this.maxLineMesssage.length - 1)
// }
break
}
this.maxLineMesssage = element;
}
}
... ... @@ -152,6 +180,24 @@ export struct CommentText {
// .height('100%')
}
// 获取文本几行
private getTextLineNum(text: string, constraintWidth: number, lineHeight: number, fontSize: number | string | Resource, fontWeight: FontWeight) {
let size = this.topMeasureText(text, constraintWidth, lineHeight, fontSize, fontWeight)
let height: number = Number(size.height)
return Math.ceil(px2vp(height) / lineHeight)
}
private topMeasureText(text: string, constraintWidth: number, lineHeight: number, fontSize: number | string | Resource, fontWeight: FontWeight, wordBreak?: WordBreak) {
return measure.measureTextSize({
textContent: text,
fontSize: fontSize,
lineHeight: lineHeight,
constraintWidth: constraintWidth,
fontWeight: fontWeight,
wordBreak: wordBreak,
})
}
}
... ... @@ -161,7 +207,11 @@ export struct CommentText {
struct Index {
build() {
Column() {
CommentText()
CommentText({longMessage: TestLongText,
maxline: 3,
fontSize: 14,
fontWeight: FontWeight.Regular,
marginWidth: (95 + 16)})
}
}
}
\ No newline at end of file
... ...