news 2026/5/10 18:21:36

调用OutlinedTextField遇到的问题

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
调用OutlinedTextField遇到的问题

1、问题

使用OutlinedTextField的组件的时候发现问题:
①、OutlinedTextField 设置了最小高度,且contentPadding无法修改,最小高度过高,不符合UI设计,所以通过自定义的方式进行两个参数的问题。
②、使用OutlinedTextField时,发现设置Modifier参数不能使用heightIn设置高度的范围,当trailingIcon结尾图标不为null的时候,value值无法居中,所以通过计算高度的方式进行强制设置高度。

2、解决问题2的实现方式

① 获取每一行中text可见最大的宽度
② 计算输入框中具体值的宽度
③ 获取输入框中一行的高度
④通过计算具体值有多少行来设置OutlinedTextField的高度

3、代码实现:

3.1 计算具体值的文本宽度

/** * 计算文本宽度 */@ComposablefunMeasureTextWidth(text:String,textStyle:TextStyle=LocalTextStyle.current,onWidthMeasured:(Float)->Unit){valtextMeasurer=rememberTextMeasurer()valdensity=LocalDensity.current// 获取当前密度LaunchedEffect(text,textStyle){valtextLayoutResult=textMeasurer.measure(text=AnnotatedString(text),style=textStyle,constraints=Constraints(maxWidth=Int.MAX_VALUE))valwidthInPx=textLayoutResult.size.width.toFloat()valwidthInDp=with(density){widthInPx.toDp()}// 转换为dponWidthMeasured(widthInDp.value)// 返回dp值}}

3.2 获取自定义的宽度和高度,并计算需要的高度

outLineHeight 为OutlinedTextField的高度设置

valvalueWidth=dimensionResource(R.dimen.width_200).valuevalvalueHeight=dimensionResource(R.dimen.outlin_text_height).valuevarvalueIntbyremember{mutableStateOf(1)}if(bean.value.isNotBlank())MeasureTextWidth(text=bean.value,textStyle=textStyle,onWidthMeasured={valueInt=ceil(it/valueWidth).toInt()})valoutLineHeight=(valueHeight*valueInt).dp
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/9 22:42:12

OpenWrt Docker管理插件:5分钟实现可视化容器部署终极指南

OpenWrt Docker管理插件:5分钟实现可视化容器部署终极指南 【免费下载链接】luci-app-dockerman Docker Manager interface for LuCI 项目地址: https://gitcode.com/gh_mirrors/lu/luci-app-dockerman luci-app-dockerman是专为OpenWrt系统打造的Docker管理…

作者头像 李华
网站建设 2026/5/1 16:05:13

Synbo项目重点进展|完成可扩展的流动性市场框架集成设计

过去一段时间,Synbo 正在加速推进生态能力建设,作为面向链上一级市场的核心融资基础设施,Synbo 始终坚持“透明、开放、共识驱动”的理念,以下是本周的项目进展。重构链上一级市场,让每一次融资、每一次判断、每一份资…

作者头像 李华
网站建设 2026/5/1 17:53:19

浩辰CAD看图王免费版下载和安装保姆级教程(附安装包,超级详细)

在工程设计、建筑规划和制造业等相关领域,CAD图纸是传递信息的关键载体。然而,传统的专业 CAD 软件往往体积大、价格贵,且对电脑配置有要求,这给需要的工作人员带来了不便。浩辰 CAD 看图王正是为了解决这一痛点而诞生的一款软件。…

作者头像 李华
网站建设 2026/5/3 7:17:08

亚马逊新品智能增长:读懂算法、精准协同,快速破局出海

在亚马逊的生态中,新品成功并非偶然,而是一场与算法系统建立信任、用数据证明价值的精密对话,理解平台底层逻辑,并据此设计科学的运营路径,是穿越激烈竞争的关键。一、黄金窗口:建立初始信任的关键期亚马逊…

作者头像 李华
网站建设 2026/5/3 8:47:56

【EI检索+高录用+可线上参会】2026年第二届生成式人工智能与数字媒体国际学术会议(GADM 2026)

随着生成式人工智能技术的迅猛发展,其在艺术创作、内容生成、用户体验优化等领域展现出前所未有的潜力。在首届会议成功举办的基础上,第二届生成式人工智能与数字媒体国际学术会议 (GADM 2026) 将于2026年2月6日至8日在中国昆明隆重召开。 本次会议旨在…

作者头像 李华
网站建设 2026/5/6 23:32:22

insertOnDuplicateKey 和 upsert 区别

二者是一样的insertOnDuplicateKey 实际上是 ON DUPLICATE KEY UPDATE,是MySQL的特有写法类似的有 ON CONFICT() ,这个是 pgsql 的类似写法在数据库操作中,INSERT ON DUPLICATE KEY UPDATE(MySQL特有语法)和UPSERT&…

作者头像 李华