首页 > 其他分享 >【HarmonyOS】根据文本内容动态测算文本控件宽高

【HarmonyOS】根据文本内容动态测算文本控件宽高

时间:2024-10-23 20:19:06浏览次数:7  
标签:控件 123456 宽高 number 内容 文本

【HarmonyOS】根据文本内容动态测算文本控件宽高

问题背景: 一般情况下,在鸿蒙里文本控件Text或者Span的宽高,我们都会设置固定宽高,或者根据内容自适应,不设置固定宽高。 但是在特殊场景下,例如,父组件的宽高需要根据子组件的内容动态设置宽高。或者是文本控件根据内容会有行数变化。都需要能动态根据文本控件的内容,测算出宽高。

解决方案:

使用MeasureText类的measureText接口实现该效果,根据文本内容获取到控件的宽度。函数入参,需要传入文本内容和字体大小即可。

文本内容是string类型,字体大小可以是number或者string,前者时为fp。一般字体大小使用px2fp进行转化。后者string时传入类似 “90px”的字符串。

该工具类还有个measureTextSize接口可以动态获取宽高。

DEMO实例:

/**
 * 动态测试文本控件行数
 */
@Entry
@Component
struct TextPage {
  
  private mTextFontSize: number = px2fp(42);
  private mLineHeight: number = px2vp(72);
  private mSysWidth: number = Utils.getSysWidth(); //获取系统宽度。从ability的onCreate函数中,通过windowStage获取。

  private mTextTestContent: string = "文本测试内容123456文本测试内容123456文本测试内容123456文本测试内容123456文本测试内容123456文本测试内容123456文本测试内容123456";

  @State mTextHeight: number = this.mLineHeight;

  aboutToappear(){
    this.mTextHeight = this.getChangeLineHeight();
  }

  private getChangeLineHeight(content: string, size: number): number {
  	let textWidth: number = MeasureText.measureText({ textContent: this.mTextTestContent, fontSize: this.mTextFontSize });
  	let targetNum: number = textWidth / this.mSysWidth;
  	return targetNum;
  }

  build() {
    Stack(){
      Text(this.mTextTestContent)
        .fontSize(this.mTextFontSize)
      	.width("100%")
      	.height(this.mTextHeight)
      	.backgroudColor(Color.Blue)
    }
     .width("100%")
     .height(this.mTextHeight)
     .backgroudColor(Color.Red)
  }
}

标签:控件,123456,宽高,number,内容,文本
From: https://blog.51cto.com/u_17074705/12341940

相关文章

  • Azure语音转文本服务:智能识别,中英文无缝转换
    作用:说话的人说的是英文,那么转换成的文本就是英文的,同理,说话的人说的是中文,那么转换成的文本也就是英文的。完整可跑通的代码很简单:importazure.cognitiveservices.speechasspeechsdkdefrecognize_from_microphone(filename):#Thisexamplerequiresenvironmentvar......
  • 使用Llama Index与Streamlit实现一个从文本中提取专业术语和定义网页小程序
    LlamaIndex有很多文档完备的用例(语义搜索、摘要等)。然而,这并不意味着我们不能将LlamaIndex应用到非常具体的用例中!在本教程中,我们将介绍使用LlamaIndex从文本中提取术语和定义的设计过程,同时允许用户稍后查询这些术语。使用Streamlit,我们可以提供一种简单的方法来构建用......
  • el-table新增记录,通过id获行记录的控件焦点
    <el-table:data="formData.list"ref="tabRef"class="my-table"> <el-table-columnlabel="编码"align="center"min-width="150"class="custom-form-item">   <template#default......
  • LongBench: 一个双语多任务的长文本理解基准测试
    LongBench:开创性的长文本理解评估基准在人工智能和自然语言处理领域,大语言模型(LLMs)的出现无疑是一场革命。这些模型在各种语言任务中展现出惊人的能力,但它们也面临着一个共同的挑战-长文本理解。大多数LLMs只能处理几千个token的输入,这严重限制了它们在处理长篇文档、报......
  • Meta 最新 SPIRIT-LM:语音文本无缝转换还能懂情绪;字节回应实习生破坏大模型训练:网传损
        开发者朋友们大家好: 这里是「RTE开发者日报」,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享RTE(Real-TimeEngagement)领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「有看点的会议」,但内容仅代表......
  • 解除网页文本禁止复制限制的六种方法
    #方法一:浏览器扩展最简单也是最省事的方法,直接安装解除复制限制的扩展完事儿。下面推荐两款扩展:SimpleAllowCopy:Chrome&Edge(Chromium系的应该都可以)AbsoluteEnableRightClick&Copy:Chrome&Edge&Firefox使用方法也很简单,在有复制限制或者右键限制的网站上,点......
  • 使用 Tkinter 构建一个文本分割工具
    使用Tkinter构建一个文本分割工具在日常的编程工作中,我们有时会遇到需要将大段文本按照一定规则分割成小段的情况。手动完成这项任务既耗时又容易出错,因此编写一个小工具来自动处理这种需求是非常有用的。本博文将介绍如何使用Python的Tkinter库构建一个图形界面应用程......
  • 前端学习Day8 CSS常用声明 (文本 、图像篇)
    目录一、文本1.1.1、字体样式的常用属性1.1.2、语法格式1.2.1、文本样式1.2.2、语法格式 二、图像2.1.1、图像控制的常用属性2.1.2、语法格式一、文本1.1.1、字体样式的常用属性属性说明font-family设置字体的类型font-weight设置字体的粗细font-size设置字体的......
  • DELPHI 隐藏程序窗口,以及TListView控件,点击标题进行排序
    设置视图: 运行效果:    unitHideWindown;interfaceusesWindows,Messages,SysUtils,Classes,Forms,StdCtrls,ActiveX,ComObj,ShellAPI,Tlhelp32,Vcl.Controls,Vcl.ComCtrls,psapi,Vcl.ExtCtrls;typeTForm1=class(TForm)GetWList......
  • ## text 文本属性
    text文本属性<!--设置文本的装饰线-->常见取值text-decoration:none没有任何装饰线(可用于去除a标签默认的下划线)text-decoration:underline下划线text-decoration:overline上划线text-decoration:line-through中划线删除线text-decoration/*无装饰线*/......