HarmonyOS ArkUi 字符串<展开/收起>功能

效果图:
在这里插入图片描述

官方API:

@ohos.measure (文本计算)

  • 方式一
measure.measureTextSize
跟方式二使用一样,只是API调用不同,可仔细查看官网
  • 方式二
    API 12+

@Preview
@Component
export struct CustomTextSpan {@State maxLines: number = 1// 临时内容,用于计算@State contentTemp: string = ''// 折叠时 显示内容@State showContent: string = ''// 是否展开@State isShow: boolean = false@Prop fontSize: number = 16@Prop fontColor: number | string = Color.Blue// 原始内容@Prop content: string ='被计算文被计算文本内容被计算文本内容被计算文本内容被计算文本内容被计算文本内容被计算文本内容被计算文本内容被计算文本内容本内容被计算文本内容被计算文本内容被计算文本内容被计算文本内容被计算文本内容被计算文本内容被计算文本内容'// 屏幕宽度  vp  (真实手机)下面会动态计算屏幕宽度@State w: number = -1// MeasureUtils  API12+提供的一种方式 也可以使用其他方式@State measureUtils: MeasureUtils = this.getUIContext().getMeasureUtils();@State computeHeight: SizeOptions = this.measureUtils.measureTextSize({textContent: this.content})@State computeLine: SizeOptions = this.measureUtils.measureTextSize({textContent: this.content})compute() {while (Number(this.computeHeight.height) > Number(this.computeLine.height)) {// 通过循环,每次减少一个字符长度,重新计算,直到高度满足要求this.contentTemp = this.contentTemp.substring(0, this.contentTemp.length - 1);this.computeHeight = this.measureUtils.measureTextSize({textContent: this.contentTemp + '...' + '展开', // <按钮文字>也要放入进行计算constraintWidth: px2vp(this.w),fontSize: this.fontSize});this.showContent = this.contentTemp + '...'}}aboutToAppear() {this.contentTemp = this.content// 真实手机动态计算屏幕的宽度this.w = display.getDefaultDisplaySync().widththis.computeHeight = this.measureUtils.measureTextSize({textContent: this.content,constraintWidth: px2vp(this.w),fontSize: this.fontSize})this.computeLine = this.measureUtils.measureTextSize({textContent: this.content,constraintWidth: px2vp(this.w),fontSize: this.fontSize,maxLines: this.maxLines})this.compute()}build() {Column() {if (!this.isShow) {Text() {Span(`${this.showContent}`)Span("展开").onClick(() => {this.isShow = !this.isShow}).fontColor(this.fontColor)}.width('100%').gesture(LongPressGesture().onAction((event: GestureEvent) => {promptAction.showToast({ message: "DSDASD" })}))}if (this.isShow) {Text(this.content).width('100%')Text("收起").width('100%').onClick(() => {this.isShow = !this.isShow}).width('100%').textAlign(TextAlign.End).fontColor(this.fontColor)}}.width('100%')}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/42806.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

迭代器模式(大话设计模式)C/C++版本

迭代器模式 C #include <iostream> #include <string> #include <vector>using namespace std;// 迭代抽象类,用于定义得到开始对象、得到下一个对象、判断是否到结尾、当前对象等抽象方法&#xff0c;统一接口 class Iterator { public:Iterator(){};virtu…

作为产品经理,如何用大模型给我们赋能?非常详细,收藏我这篇就够了

作为一名产品经理&#xff0c;如果您考虑转行至大模型领域&#xff0c;您将能够将产品管理技能与大模型技术相结合&#xff0c;从而在产品开发和创新方面获得一系列好处。以下是转行大模型对产品经理的一些潜在益处&#xff1a; 更深入的技术理解&#xff1a;了解大模型技术将…

使用 Python 处理 Lumerical 导出的 .txt 文件(完结)

使用 Python 处理 Lumerical 导出的 .txt 文件 引言正文以 , 隔开的波长与透射率以 \t 隔开的波长与透射率引言 之前在 添加链接描述 一文中我们已经介绍了如何将 Lumerical 仿真中的 S 参数相关数据导出为 .txt 文件。这里我们来分享如何使用 Python 对这些数据进行处理。 正…

如果国产BI工具也有顶流,它们一定会上榜

在数据驱动的今天&#xff0c;商业智能&#xff08;BI&#xff09;工具已成为企业不可或缺的助手&#xff0c;它们通过强大的数据处理和分析能力&#xff0c;帮助企业洞察市场趋势&#xff0c;优化运营决策。如果BI工具界也有“顶流”&#xff0c;那么奥威BI、帆软BI&#xff0…

我国甜菜碱行业规模较大 未来行业发展前景较好

我国甜菜碱行业规模较大 未来行业发展前景较好 甜菜碱化学名称三甲基甘氨酸&#xff0c;是一种在动植物体内广泛存在的季铵型生物碱。它具有多种生物学功能&#xff0c;包括渗透调节、甲基供体等&#xff0c;广泛应用于饲料、食品、医药和化妆品等行业。甜菜碱的提取主要来源于…

揭秘SmartEDA:电路仿真软件如何贯穿课前课中课后,助力电子学习新纪元!

在电子设计与自动化的学习道路上&#xff0c;一款强大的电路仿真软件往往能为学生们带来事半功倍的效果。今天&#xff0c;我们就来深入探讨一下SmartEDA这款电路仿真软件在课前、课中、课后的全方位应用&#xff0c;看看它如何助力我们的电子学习步入新纪元&#xff01; 1、课…

直播平台集成美颜工具详解:视频美颜SDK开发指南

本篇文章&#xff0c;小编将详细介绍如何在直播平台中集成美颜工具&#xff0c;帮助开发者更好地理解视频美颜SDK的开发过程。 一、美颜工具的作用和原理 1.1 美颜工具的作用 美颜工具主要用于提升直播视频的画面质量&#xff0c;让主播和观众在镜头前看起来更加美观。这些功…

2024年最新ComfyUI汉化及manager插件安装详解!

前言 在ComfyUI文生图详解中&#xff0c;学习过如果想要安装相应的模型&#xff0c;需要到模型资源网站&#xff08;抱抱脸、C站、魔塔、哩布等&#xff09;下载想要的模型&#xff0c;手动安装到ComfyUI安装目录下对应的目录中。 为了简化这个流程&#xff0c;我们需要安装Co…

MacOS下更新curl

苹果自带的curl不支持Https&#xff0c;我们可以通过curl -V看到如下结果 curl 7.72.0 (x86_64-apple-darwin18.6.0) libcurl/7.72.0 zlib/1.2.12 libidn2/2.3.7 librtmp/2.3 Release-Date: 2020-08-19 Protocols: dict file ftp gopher http imap ldap ldaps pop3 rtmp rtsp …

Java数据结构9-排序

1. 排序的概念及引用 1.1 排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录…

认证资讯|Bluetooth SIG认证

在当今高度互联的世界中&#xff0c;无线技术的普及已经成为我们生活和工作中不可或缺的一部分。作为领先的无线通信技术之一&#xff0c;Bluetooth技术以其稳定性、便捷性和广泛的应用场景而备受青睐。然而&#xff0c;要想在激烈的市场竞争中脱颖而出&#xff0c;获得Bluetoo…

6、Redis系统-数据结构-04-Hash

四、哈希表&#xff08;Hashtable&#xff09; 哈希表是一种高效的键值对数据结构&#xff0c;通过散列函数将键映射到表中的位置&#xff0c;实现快速的插入、删除和查找操作。Redis 广泛使用哈希表来实现 Hash 对象和数据库的键值存储。以下将从结构设计、哈希冲突与链式哈希…

深入源码,探究#、$号替换符的区别

在Mybatis的日常使用过程中以及在一些技术论坛上我们都能常常听到&#xff0c;不要使用$符号来进行SQL的编写&#xff0c;要使用#符号&#xff0c;否则会有SQL注入的风险。那么&#xff0c;为什么在使用$符号时会有注入的风险呢&#xff0c;以及#号为什么不会有风险呢&#xff…

Python结合MobileNetV2:图像识别分类系统实战

一、目录 算法模型介绍模型使用训练模型评估项目扩展 二、算法模型介绍 图像识别是计算机视觉领域的重要研究方向&#xff0c;它在人脸识别、物体检测、图像分类等领域有着广泛的应用。随着移动设备的普及和计算资源的限制&#xff0c;设计高效的图像识别算法变得尤为重要。…

设计模式-结构型-08-组合模式

文章目录 1、学校院系展示需求2、组合模式基本介绍3、组合模式示例3.1、 解决学校院系展示&#xff08;透明模式1&#xff09;3.2、高考的科目&#xff08;透明模式2&#xff09;3.3、高考的科目&#xff08;安全组合模式&#xff09; 4、JDK 源码分析5、注意事项和细节 1、学校…

存储过程编程-创建(CREATE PROCEDURE)、执行(EXEC)、删除(DROP PROCEDURE)

一、定义 1、存储过程是在SQL服务器上存储的已经编译过的SQL语句组。 2、存储过程分为三类&#xff1a;系统提供的存储过程、用户定义的存储过程和扩展存储过程 &#xff08;1&#xff09;系统提供的存储过程&#xff1a;在安装SQL Server时&#xff0c;系统创建了很多系统存…

AI机器人在企业拓客上常见的功能有哪些

AI机器人具备多种功能&#xff0c;这些功能主要基于其被设计和训练的目的。整理了一些常见的AI机器人功能&#xff1a; 1. 语音识别与自然语言处理&#xff1a; - 语音识别&#xff1a;将用户的语音输入转换为文本&#xff0c;以便机器人可以理解和处理。 - 自然语言处理…

QCC5181 歌词歌曲名多国语言显示替代QCC5125 CSR8675

QCC518X作为Qualcomm新一代蓝牙技术芯片&#xff0c;支持最新蓝牙协议V5.4&#xff0c;较QCC512X系列&#xff0c;它有更强大的DSP、CPU。除支持USB、I2S、SPDIF等接口外&#xff0c;还扩展了LE Audio功能&#xff0c;扩展支持AptX Lossless。以5181为例&#xff0c;我们还扩展…

vscode语言模式

1.背景 写vue3ts项目的时候&#xff0c;用到了volar插件&#xff0c;在单文件使用的时候&#xff0c;鼠标悬浮在代码上面会有智能提示&#xff1b; 但是最近volar插件提示被弃用了&#xff0c;然后我按照它的官方提示&#xff0c;安装了Vue-official扩展插件&#xff0c;但是…

Banana Pi BPI-M5 Pro 低调 SBC 采用 Rockchip RK3576 八核 Cortex-A72/A53 AIoT SoC

Banana Pi BPI-M5 Pro&#xff0c;也称为 Armsom Sige5&#xff0c;是一款面向 AIoT 市场的低调单板计算机 (SBC)&#xff0c;由 Rockchip RK3576 八核 Cortex-A72/A53 SoC 驱动&#xff0c;提供Rockchip RK3588和RK3399 SoC 之间的中档产品。 该主板默认配备 16GB LPDDR4X 和…