鸿蒙中Text组件的展开和收起效果

前言:

DevEco Studio版本:4.0.0.600

效果:

 

原理分析:

通过效果图我们知道,可以将‘...展开’ 盖在文本内容的的右下角来实现这个效果。那么要实现盖上的效果可以通过层叠布局(Stack)来实现,通过alignContent属性:BottomEnd配置到右下角。

通过动态设置Text的maxLines来控制显示行数和全部显示。maxLines(-1)表示不限制行数

详细代码:

@Entry
@Component
struct Index {@State isUnfold: boolean = false@State longMessage: string = "\t\t豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。" +"雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻。十旬休假,胜友如云;千里逢迎,高朋满座。" +"腾蛟起凤,孟学士之词宗;紫电青霜,王将军之武库。家君作宰,路出名区;童子何知,躬逢胜饯。"build() {Stack({ alignContent: Alignment.BottomEnd }) {Text(this.isUnfold ? this.longMessage + '\n ' : this.longMessage).fontSize(20).textOverflow({ overflow: TextOverflow.None }).maxLines(this.isUnfold ? -1 : 3)Text(this.isUnfold ? '...收起' : '...展开').width(60).fontSize(20).fontColor(Color.Blue).backgroundColor(Color.White).onClick(() => {this.isUnfold = !this.isUnfold})}.margin({ top: 50 })}
}

弊端:

通过效果图可以看到是实现了我们的业务需求,但是当“雄州雾列,”为数字或字母等时,会出现内容没有盖全的情况,主要原因是给Text('...展开').width(60),默认是占三个文字大小(每个文字大小(20)* 3 = 60)和数字实际宽度不相等。

目前针对上面的弊端还没有很好的处理方式,如果大家有更好的实现方式欢迎大家留言

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

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

相关文章

基于ceph-deploy部署Ceph 集群

Ceph分布式存储一、存储基础1、单机存储设备1.1 单机存储的问题 2、分布式存储(软件定义的存储SDS)2.1 分布式存储的类型 二、Ceph简介1、Ceph优势2、Ceph架构3、Ceph 核心组件4、OSD 存储后端5、Ceph 数据的存储过程6、Ceph 版本发行生命周期 三、Ceph 集群部署1、 基于 ceph-…

【Vue3】Ref 和 ShallowRef 的区别

目录 什么是 Ref什么是 ShallowRef区别对比示例代码 什么是 Ref Ref 是 Vue 3 中的一个新的基本响应式数据类型,它允许我们包装任意的 JavaScript 值,并且在数据变化时发出通知。Ref 提供了一个 .value 属性来访问其内部的值,同时还提供了一…

【前端捉鬼记】记录两个js中非常基础的小白问题

写逻辑时,遇到两个js代码里非常基础的小白问题,用简单的代码测试并记录一下: 1、一个对象 a 有个数组类型的属性 b,将这个数组取出保存到另一个变量 m,修改 m,对象 a 中的属性 b 是否跟随变化?…

【Java EE初阶二十七】深入了解cookie

1. 简单了解cookie Cookie是http请求里header 中的一个属性,浏览器持久化存储数据的一种机制,网页无法访问主机的文件系统,要想存储数据就得通过其他的方式; 且cookie中保存的数据也是键值对的形式,最终还是要把这个键…

移动开发:网格视图

一、在新建GridView模块下添加图片以及创建cell.xml文件 1.粘贴图片时选择红框中的路径,点击“OK” 2.在路径后添加-mdpi后缀,再点击“OK” 二、相关代码块 1.MainActivity.java文件代码 package com.example.gridview;import androidx.appcompat.app.AppCompatAc…

供应链优化:降本增效的核心战略——张驰咨询

在当今这个高度竞争的商业环境中,企业为了保持竞争力,不断寻求降低成本和提升效率的策略变得至关重要。有效的成本控制和效率提升不仅能够增加企业的利润率,还能增强其市场地位和客户满意度。以下是一些实用的策略,旨在帮助企业实…

HCIE之MPLS练习(六)

MPLS练习 一、静态LSP1、IGP构建FEC2、全网运行MPLS3、打通LSP通道3.1、静态LSP配置3.2、转发过程3.3、验证标签转发过程 4、利用LSP传递任意流量4.1、配置4.2、验证 二、LDP协议1、IGP构建FEC2、全网运行mpls、ldp3、mpls ldp邻居关系、LIB表4、转发过程5、验证mpls转发过程6、…

从嵌入式Linux到嵌入式Android

最近开始投入Android的怀抱。说来惭愧,08年就听说这东西,当时也有同事投入去看,因为恶心Java,始终对这玩意无感,没想到现在不会这个嵌入式都快要没法搞了。为了不中年失业,所以只能回过头又来学。 首先还是…

leetcode——异或运算—— 只出现一次的数字

给你一个 非空 整数数组 nums ,除了某个元素只出现一次以外,其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题,且该算法只使用常量额外空间。 示例 1 : 输入&#xff…

Python(NetOps)前传-网络设备开局配置

背景 我们知道用Python在cli配置网络设备的前提是: 网络设备与Python主机网络可达网络设备已开启并完成ssh相关配置 目标 本文已华为S5720S-52P-LI-AC交换机为例,完成: 完成网络设备开局配置;用Python脚本验证ssh登录 配置 …

深入理解nginx负载均衡round-robin算法

目录 1. 概述2. 如何启用round-robin算法3. 初始化round-robin算法3.1 设置算法上下文环境初始化回调函数3.2 加载服务器列表4. 初始化负载均衡请求上下文5. 获取peer6. 释放peer1. 概述 nginx为我们提供了强大的HTTP代理功能,而负载均衡算法是实现后端多Real Server代理的一个…

系统认识数据分析

数据分析的全貌 包括应用、观测和实验 观测 分为两部分观察和测量 观察 采集数据: 解析系统日志 : 产生日志、解析日志、得到数据 埋点获取新数据 :日志记录新信息、解析日志、得到新数据 通过传感器收集:例如天气数据收集 爬虫&…

uniapp——信号值组件(vue3)

组件代码 <template><view><view class"signals"><view v-for"(item, index) in signals" :key"index" class"signal" :style"item"></view></view></view> </template>&…

ros2+nav2中常用的概念

一.sdf文件 Simulation Description File&#xff0c;描述Gazebo中机器人模型的文件&#xff0c;一般在models文件夹下。该文件描述了组成机器人的物理属性、关节、碰撞对象、视觉效果和插件的集合。 Links: 链接包含模型的一个实体的物理属性。 这可以是一个轮子&#xff0c…

Android工程师必备知识,2024Android面试

前言 职场的金九银十跳槽季火热进行中&#xff0c;不同的是&#xff0c;今年的竞争比往年会更加激烈一些&#xff0c;形式更加严峻一些。 对于求职者来说&#xff0c;面试是一道坎&#xff0c;很多人会恐惧面试&#xff0c;即使是工作很多年的老鸟&#xff0c;也可能存在面试…

STM32控制气泵和电磁阀实现

一、功能简介 使用STM32控制气泵和电磁阀的开和关&#xff0c;气泵和电磁阀的供电电压为12V。 二、实现过程 1、气泵和电磁阀的开和关均为开关量&#xff0c;实现控制方法有多种&#xff0c;比如继电器&#xff0c;但是继电器动作有噪声且体积较大&#xff0c;更好的方法为使…

Sqli-labs靶场第19关详解[Sqli-labs-less-19]自动化注入-SQLmap工具注入

Sqli-labs-Less-19 通过测试发现&#xff0c;在登录界面没有注入点&#xff0c;通过已知账号密码admin&#xff0c;admin进行登录发现&#xff1a; 返回了Referer &#xff0c;设想如果在Referer 尝试加上注入语句&#xff08;报错注入&#xff09;&#xff0c;测试是否会执行…

论文阅读笔记 | Limited-Reference Image Quality Assessment: Paradigms and Discussions

文章目录 文章题目发表年限期刊/会议名称动机主要思想或方法架构实验结果 文章链接&#xff1a;https://dl.acm.org/doi/10.1145/3581783.3613436 文章题目 Limited-Reference Image Quality Assessment: Paradigms and Discussions 发表年限 2023 期刊/会议名称 MM’23: …

Promise状态变化

promise共有三种状态&#xff1a;pending&#xff08;待定中&#xff09;| resolved&#xff08;已完成&#xff09;| rejected&#xff08;已拒绝&#xff09;。 其状态变化过程有两种&#xff1a;pending >>> resolved 或 pending >>> rejected. 状态变化…

1688商品详情数据(商品属性,价格,sku等)1688API接口开发系列

1688&#xff08;阿里巴巴批发网&#xff09;提供了API接口供开发者使用&#xff0c;以便能够获取商品详情数据&#xff0c;包括商品属性、价格、SKU等信息。在使用1688的API接口之前&#xff0c;你需要完成以下几个步骤&#xff1a; 请求文档&#xff0c;API接口接入Anzexi58…