Toggle navigation
Toggle navigation
This project
Loading...
Sign in
developOne
/
harmonyPool
Go to a project
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation pinning
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Authored by
xugenyuan
2024-05-07 16:20:48 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
ce08f61447f09b983e43698a5d53c27f38f1a38e
ce08f614
1 parent
5e2e7717
ref |> 临时解决评论内容带折行且超过3行时 无法展开收起问题
Signed-off-by: xugenyuan <xugenyuan@wondertek.com.cn>
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
54 additions
and
4 deletions
sight_harmony/features/wdComponent/src/main/ets/components/comment/view/CommentText.ets
sight_harmony/features/wdComponent/src/main/ets/components/comment/view/CommentText.ets
View file @
ce08f61
...
...
@@ -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
...
...
Please
register
or
login
to post a comment