HarmonyOS 鸿蒙Next Text有办法监听其高度变化或者行数变化吗
HarmonyOS 鸿蒙Next Text有办法监听其高度变化或者行数变化吗
Text有办法监听其高度变化或者行数变化吗
2 回复
参考代码
import measure from '@ohos.measure'
@Entry
@Component
struct MeasurePage {
@State rawTitle: string =
"1月16日，国务院新闻办公室举行新闻发布会，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排介绍2024年春运形势及工作安排绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排"
@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();
}
}
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.width as number) > (twoLineSize.width as number)) {
this.maxl = 2
return;
}
console.log('test row height:' + titleSize.width)
console.log('test twoLineSize height:' + twoLineSize.width)
let clipTitle: string = this.rawTitle
this.suffixStr = this.EXPAND_STR;
while ((titleSize.width as number) > (twoLineSize.width 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.width)
}
console.log("test clipTitle:" + clipTitle)
this.title = clipTitle + this.ellipsis
this.expanded = false;
}
@State maxl: number = 3;
build() {
Row() {
Column() { //样式1
Text() {
Span(this.title)
}
.fontSize(this.fontSize)
.id("title")
.width(this.titleWidth)
.maxLines(this.maxl)
.margin({ bottom: 30 })
.backgroundColor(Color.Orange)
Column() {
Text('文本未超过限制行数的内容') {
}.fontSize(this.fontSize).id("title").width(this.titleWidth).maxLines(this.maxl)
}.backgroundColor(Color.Pink)
// Button("切换").onClick(() => {
// this.title = "实打实实打实实打实实打实实打"
// this.aboutToAppear()
// })
}.width('100%').alignItems(HorizontalAlign.Start)
}.height('100%')
}
}
方案二：
@Entry
@Component
struct Demo {
@State rawTitle: string =
"1月16日，国务院新闻办公室举行新闻发布会，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排介绍2024年春运形势及工作安排绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排，介绍2024年春运形势及工作安排"
// @State rawTitle: string = "1月16日，国务院新闻办公室举行新闻发布会"
build() {
RelativeContainer() {
Text(this.rawTitle)
.id('DemoHelloWorld')
.fontWeight(FontWeight.Bold)
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.height('100%')
.width('100%')
}
}
方案三：
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 = ""
titleWidth: number = 350
@State maxLines: number = 1
fontSize: number = 16
getRowHeight():number {
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.maxLines
})
if ((titleSize.height as number) > (twoLineSize.height as number)) {
this.maxLines = 3
return 100
} else {
this.maxLines = 1
return 80
}
}
build() {
Row() {
Column() {
Text() {
Span(this.title)
}
.fontSize(this.fontSize).id("title").width(this.titleWidth)
.backgroundColor(Color.Red)
.maxLines(this.maxLines)
Button("获取行高")
.onClick(()=>{
this.getRowHeight()
})
}.width('100%').alignItems(HorizontalAlign.Start)
}.height('100%')
}
}
更多关于HarmonyOS 鸿蒙Next Text有办法监听其高度变化或者行数变化吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙系统中，监听Next Text组件的高度变化或行数变化，可以通过自定义组件和布局监听机制来实现。
HarmonyOS提供了丰富的UI组件和布局容器，对于Next Text这类文本显示组件，其高度和行数变化通常与文本内容的变化相关。要监听这些变化，可以：
-
使用自定义组件：通过继承Next Text组件，在其内部实现文本变化时的监听逻辑。当文本内容更新时，重新计算组件的高度和行数，并触发相应的回调或事件。
-
布局监听：在布局容器层面，利用HarmonyOS的布局监听接口，监测子组件（包括Next Text）的尺寸变化。当Next Text的尺寸发生变化时，可以推断其高度或行数可能已发生变化。
-
文本监听：直接监听Next Text的文本内容变化，当文本内容更新时，根据新的文本内容计算并更新组件的高度和行数信息。
需要注意的是，HarmonyOS的UI框架和组件设计可能与传统的Android或iOS有所不同，因此实现细节可能需要根据具体的HarmonyOS版本和API进行调整。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html
