HarmonyOS鸿蒙Next中Text获取展示的行数

HarmonyOS鸿蒙Next中Text获取展示的行数 有个需求是,Text只有一行的时候,文本居中展示,超过一行时,左对齐显示,请问怎么获取Text显示的行数?最好有个行数变化的监听。

3 回复

@ohos.measure可以返回多行文字的宽高,没有返回行数,但可以根据业务场景来计算。

API文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-measure-V5

//场景一:超过特定行数(下方以3行为例),样式不同,比如加上展开、收缩。 计算文本总高度

let textSize : SizeOptions = measure.measureTextSize({ textContent: this.message, fontSize: 24, constraintWidth: 300 });

//限定宽度和最大行数(3行),计算高度

let textSize2 : SizeOptions = measure.measureTextSize({ textContent: this.message, fontSize: 24, maxLines: 3, constraintWidth: 300 });

//若textSize.height > textSize2.height,则表示实际高度超过3行,根据判断结果进行业务处理。

或者使用以下方法:

可以通过onAreaChange计算Text组件当前文本的行数

@Entry
@Component
struct Page49 {

// 预设的默认行高,初始未定义
private INITIAL_LINE_HEIGHT: number = -1;

// 状态管理:存储用户输入的文本内容
@State private textContent: string = '';

// 状态管理:根据计算显示的行数
@State private displayedLines: number = 0;

build() {
Column() {
// 按钮以添加字符到文本
Button('添加文字').onClick(() => {
this.textContent += '哈'; // 添加一个汉字“哈”至文本内容
})

// 按钮以删除最后一个字符
Button('删除文字').onClick(() => {
if (this.textContent.length > 0) { // 确保文本非空才执行删除
this.textContent = this.textContent.slice(0, -1); // 删除最后一个字符
}
})

// 显示当前文本行数的提示信息
Text(`当前行数: ${this.displayedLines}`)

// 可变高度的文本显示区域,响应式更新行数
Text(this.textContent)
.width('50%')// 设置文本宽度为50%
.onAreaChange((previousArea: Area, currentArea: Area) => {
// 初始化行高,仅在首次获取到有效高度时设置
if (this.INITIAL_LINE_HEIGHT == -1 && this.INITIAL_LINE_HEIGHT === this.INITIAL_LINE_HEIGHT && currentArea.height > 0) {
this.INITIAL_LINE_HEIGHT = currentArea.height as number;
}

// 计算并更新显示的行数
console.log('Previous Height:', previousArea.height);
console.log('Current Height:', currentArea.height);
console.log('this.INITIAL_LINE_HEIGHT:', this.INITIAL_LINE_HEIGHT);
this.displayedLines = Math.ceil(currentArea.height as number / this.INITIAL_LINE_HEIGHT);
})

}
.width('100%')
}

textWidth: number = MeasureText.measureText({ textContent: this.options.message ?? ‘’, fontSize: this.options.messageSize ?? 14 })

messageWidth: number = px2vp(WindowUtil.getDisplayWidth()) * 0.7 - 24

displayLines: number = 1

aboutToAppear(): void { this.options = ConfirmOption.checkValue(this.options)

this.displayLines = px2vp(this.textWidth) / this.messageWidth } // 用这种方式可以解决。字符的全部宽度/可展示区域的宽度=行数。

更多关于HarmonyOS鸿蒙Next中Text获取展示的行数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,Text组件提供了获取展示行数的功能。可以通过Text组件的getLineCount方法来获取当前文本展示的行数。该方法返回一个整数值,表示文本在布局中所占的行数。

具体实现如下:

import { Text } from '@ohos.agp.components';

const text = new Text(context);
text.text = "这是一个多行文本示例,用于测试获取行数。";
text.layoutConfig = { width: 200, height: 100 }; // 设置文本布局大小

// 获取展示的行数
const lineCount = text.getLineCount();
console.log("文本展示的行数:" + lineCount);

在这个示例中,Text组件设置了文本内容和布局大小,然后通过getLineCount方法获取文本展示的行数。lineCount变量将保存当前文本在布局中占用的行数。

需要注意的是,getLineCount方法返回的行数是基于当前Text组件的布局和文本内容计算得出的,如果布局或文本内容发生变化,行数也会相应变化。

在HarmonyOS鸿蒙Next中,可以通过Text组件的getLineCount()方法获取当前显示的文本行数。该方法返回一个整数,表示文本在布局中实际占用的行数。注意,行数可能受到文本内容、字体大小、布局宽度等因素的影响。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!