developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
chenjun1_wd
2184d36b 1 parent b723213f

19988 视频详情页，标题和摘要折行不正确，全文按钮不应折到下一行，省略号和全文按钮颜色不正确。

Inline Side-by-side
Showing 1 changed file with 51 additions and 55 deletions
import measure from '@ohos.measure'
import { ContentDetailDTO } from 'wdBean/Index'
import { DetailDialog } from './DetailDialog'
import { componentUtils } from '@kit.ArkUI'
import { DateTimeUtils } from 'wdKit'
const TAG = 'PlayerTitleView';
@Preview
@Component
export struct PlayerTitleView {
... ... @@ -17,11 +17,8 @@ export struct PlayerTitleView {
@State isOverLines: boolean = false
@State isTitleOverLines: boolean = false
@State summary: string = ''
@State private titleLines: number = 0
@State private summaryLines: number = 0
dialogController: CustomDialogController = new CustomDialogController({
builder: DetailDialog({
name: this.getName(),
... ... @@ -30,7 +27,7 @@ export struct PlayerTitleView {
isOpenDetail: this.isOpenDetail
}),
cancel:()=>{
cancel: () => {
this.isOpenDetail = !this.isOpenDetail
},
customStyle: true,
... ... @@ -74,7 +71,7 @@ export struct PlayerTitleView {
fontSize: fontSize,
fontWeight: 400,
lineHeight: 20,
wordBreak:WordBreak.BREAK_ALL
wordBreak: WordBreak.BREAK_ALL
})
let clipStr: string = ''
for (let i = 0; i < strArr.length; i++) {
... ... @@ -83,7 +80,7 @@ export struct PlayerTitleView {
fontSize: fontSize,
fontWeight: 400,
lineHeight: 20,
wordBreak:WordBreak.BREAK_ALL
wordBreak: WordBreak.BREAK_ALL
}) >= textWidth * maxLines - measureTruncateWidth) {
this.isOverLines = true
break;
... ... @@ -93,6 +90,7 @@ export struct PlayerTitleView {
console.log(TAG, 'clipStr:', clipStr)
return clipStr
}
/**
* 截断文本
* @param {string} str 要截断的文本 '啊啊啊啊啊'
... ... @@ -109,7 +107,7 @@ export struct PlayerTitleView {
fontSize: fontSize,
fontWeight: 600,
lineHeight: 20,
wordBreak:WordBreak.BREAK_ALL
wordBreak: WordBreak.BREAK_ALL
})
let clipStr: string = ''
for (let i = 0; i < strArr.length; i++) {
... ... @@ -118,7 +116,7 @@ export struct PlayerTitleView {
fontSize: fontSize,
fontWeight: 600,
lineHeight: 20,
wordBreak:WordBreak.BREAK_ALL
wordBreak: WordBreak.BREAK_ALL
}) >= textWidth * maxLines - measureTruncateWidth) {
this.isTitleOverLines = true
break;
... ... @@ -145,14 +143,13 @@ export struct PlayerTitleView {
this.summary = this.getSummary()
}
private updateSummaryLines() {
this.summaryLines = Math.max(1, 4 - this.titleLines)
// console.info(`cj2024 titleLines = ${this.titleLines}`)
this.isOverLines = this.summary.length > this.clipText(this.summary, 14, this.summaryLines, this.windowWidth - 150 - vp2px(50)).length
this.isOverLines = this.summary.length >
this.clipText(this.summary, 14, this.summaryLines, this.windowWidth - 150 - vp2px(50)).length
}
build() {
Column() {
if (this.getName()) {
... ... @@ -212,50 +209,50 @@ export struct PlayerTitleView {
// })
// }
// } else {
if(this.summary && this.titleLines < 4) {
Text() {
Span(this.clipText(this.summary, 14, this.summaryLines, this.windowWidth - 150 - vp2px(50)))
.fontSize(14)
.fontColor(Color.White)
.lineHeight(21)
if (this.summary && this.titleLines < 4) {
Text() {
Span(this.clipText(this.summary, 14, this.summaryLines, this.windowWidth - 150 - vp2px(50)))
.fontSize(14)
.fontColor(Color.White)
.lineHeight(21)
.fontWeight(400)
.fontFamily('PingFang SC-Regular')
if (this.isOverLines) {
Span('... 全文')
.fontColor('#888888')
.fontWeight(400)
.fontFamily('PingFang SC-Regular')
if (this.isOverLines) {
Span('... 全文')
.fontColor('#888888')
.fontWeight(400)
.fontFamily('PingFang SC-Regular')
.fontSize(12)
.onClick(() => {
this.isOpenDetail = true
this.dialogController?.open()
})
ImageSpan($r('app.media.comment_unfold_svg'))
.width(14)
.height(14)
.objectFit(ImageFit.Fill)
.verticalAlign(ImageSpanAlignment.BOTTOM)
.margin({bottom:1})
// .padding({
.fontSize(12)
.onClick(() => {
this.isOpenDetail = true
this.dialogController?.open()
})
ImageSpan($r('app.media.comment_unfold_svg'))
.width(14)
.height(14)
.objectFit(ImageFit.Fill)
.verticalAlign(ImageSpanAlignment.BOTTOM)
.margin({ bottom: 1 })// .padding({
// bottom: 4
// })
.onClick(() => {
this.isOpenDetail = true
this.dialogController?.open()
})
.onClick(() => {
this.isOpenDetail = true
this.dialogController?.open()
})
}
}
.padding({
left: 0,//6
right: 6,
top: 0,//4
bottom: 4
})
}
.padding({
left: 0, //6
right: 6,
top: 0, //4
bottom: 4
})
}
// }
Text(DateTimeUtils.formatDate(new Date(this.contentDetailData?.publishTime).getTime(), DateTimeUtils.PATTERN_DATE_TIME_HYPHEN_MM))
Text(DateTimeUtils.formatDate(new Date(this.contentDetailData?.publishTime).getTime(),
DateTimeUtils.PATTERN_DATE_TIME_HYPHEN_MM))
.fontSize(12)
.fontColor(Color.White)
.opacity(0.7)
... ... @@ -274,7 +271,7 @@ export struct PlayerTitleView {
@Builder
titleBuilder() {
Text() {
Span(this.clipTitleText(this.getTitle(), 14, 4, this.windowWidth - 230 - vp2px(50)))
Span(this.clipTitleText(this.getTitle(), 14, 4, this.windowWidth - 234 - vp2px(50)))
.fontSize(15)
.fontColor(Color.White)
.lineHeight(20)
... ... @@ -282,7 +279,7 @@ export struct PlayerTitleView {
.fontFamily('PingFang SC-Regular')
if (this.isTitleOverLines) {
Span('... 全文')
.fontColor('#888888')
.fontColor(Color.White)
.fontWeight(600)
.fontFamily('PingFang SC-Regular')
.fontSize(12)
... ... @@ -295,8 +292,7 @@ export struct PlayerTitleView {
.height(14)
.objectFit(ImageFit.Fill)
.verticalAlign(ImageSpanAlignment.BOTTOM)
.margin({bottom:1})
// .padding({
.margin({ bottom: 1 })// .padding({
// bottom: 4
// })
.onClick(() => {
... ... @@ -308,14 +304,14 @@ export struct PlayerTitleView {
}
.onAreaChange((oldArea: Area, newArea: Area) => {
//console.info(`cj2024 titleLines = ${newArea.height as number} line = ${(newArea.height as number) / 20}`)
this.titleLines = Math.floor((newArea.height as number) / 20)// 20是行高
this.titleLines = Math.floor((newArea.height as number) / 20) // 20是行高
//console.info(`cj2024 titleLines = ${this.titleLines}`)
this.updateSummaryLines()
})
.padding({
left: 0,//6
left: 0, //6
right: 6,
top: 0,//4
top: 0, //4
bottom: 4
})
}
... ...