HarmonyOS 鸿蒙Next Text组件如何知道当前文本是否已超出maxLines?
HarmonyOS 鸿蒙Next Text组件如何知道当前文本是否已超出maxLines?
有一个场景是文本最多显示3行,当文本内容超过3行时需要在文本下方显示查看全文。目前Text组件的文档没有看到API能够判断这种情况,请问有其它方法可以实现该功能吗?
请验证下如下代码能否符合您的要求
import measure from '@ohos.measure'
@Entry
@Component
struct MeasurePage {
@State rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排。从2月9日(除夕)00:00到2月17日(正月初八)24:00,免费9天。1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排"
// @State rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会"
@State title: string = this.rawTitle //
@State suffixStr: string = ""
expanded: Boolean = true
titleWidth: number = 350
needProcess: boolean = true
ellipsis: string = "..."
EXPAND_STR: string = "展开"
COLLAPSE_STR: string = "收起"
MAX_LINES: number = 3;
fontSize: number = 16
aboutToAppear(): void {
this.process();
}
process(): void {
if (this.expanded) {
this.collapseText();
} else {
this.expandText();
}
}
//展开文本
expandText(): void {
console.log('testTag: ' + this.needProcess);
if (this.needProcess) {
this.suffixStr = this.COLLAPSE_STR; //收起
this.expanded = true;
this.title = this.rawTitle;
}
}
collapseText(): void {
if (!this.needProcess) {
return;
}
let titleSize : SizeOptions = measure.measureTextSize({
textContent: this.rawTitle,
constraintWidth: this.titleWidth,
fontSize: this.fontSize
})
let twoLineSize : SizeOptions = measure.measureTextSize({
textContent: this.rawTitle,
constraintWidth: this.titleWidth,
fontSize: this.fontSize,
maxLines: this.MAX_LINES
})
//文本未超过限制行数,不进行展开、收起处理
if ((titleSize.height as number) == (twoLineSize.height as number)) {
this.needProcess = false;
return;
}
console.log('test row height:' + titleSize.height)
console.log('test twoLineSize height:' + twoLineSize.height)
let clipTitle: string = this.rawTitle
this.suffixStr = this.EXPAND_STR;
while ((titleSize.height as number) > (twoLineSize.height as number)) {
this.expanded = true;
// 可以修改其他计算算法提高性能
clipTitle = clipTitle.substring(0, clipTitle.length - 1);
titleSize = measure.measureTextSize({
// textContent: clipTitle + this.ellipsis + this.suffixStr,
textContent: clipTitle + this.ellipsis,
constraintWidth: this.titleWidth,
fontSize: this.fontSize
})
console.log("test while clipTitle:" + clipTitle)
console.log("test while clipTitle height:" + titleSize.height)
}
console.log("test clipTitle:" + clipTitle)
this.title = clipTitle + this.ellipsis
this.expanded = false;
}
build() {
Row() {
Column() {
Text(){
Span(this.title)
}
.fontSize(this.fontSize)
.id("title")
.width(this.titleWidth)
if (this.needProcess) {
Text(this.suffixStr)
.fontColor(Color.Orange)
.onClick((event) => {
this.process();
})
}
}
.width('100%')
.alignItems(HorizontalAlign.Start)
}
.height('100%')
}
}
更多关于HarmonyOS 鸿蒙Next Text组件如何知道当前文本是否已超出maxLines?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS中,Next Text组件用于显示多行文本。要判断当前文本是否已超出设定的maxLines
,可以通过监听组件的布局变化或者利用组件提供的一些状态属性来实现。但HarmonyOS的API文档中并未直接提供一个简单的方法来获取这一状态,因此通常需要通过间接方式来判断。
一种可行的方法是,通过设置文本组件的onLayout
回调,在布局完成后检查文本绘制的高度是否超出了允许的最大高度(由maxHeight
和字体大小、行高等因素计算得出)。如果实际高度超出,则可以认为文本已经超出了maxLines
的限制。
另一种方法是,如果Next Text组件提供了类似于overflow
的属性或者状态(这在某些UI框架中是常见的),可以直接检查该属性来判断文本是否溢出。但具体实现需参考HarmonyOS最新的API文档或组件说明。
由于HarmonyOS的API和组件特性可能会随着版本更新而变化,建议查阅最新的官方文档或示例代码以获取最准确的信息。