|Axure 矩形长度跟随文字的长度变化
编辑导读：矩形长度的变化是随着文字长度的变化而变化 ， 若两者长度不统一 ， 视觉体验会大大减分 。 本文用Axure教程介绍如何让矩形宽度跟随文字长度变化 ， 希望对你有帮助 。
本文插图
在Axure中 ， 已加载的矩形的长度不会随着矩形文字的变化而变化（就算矩形设置了‘自动适合文本宽度’也一样） ，需要手动设置 。
本文插图
变更前文本矩形宽度
本文插图
变更文本后文本矩形的宽度不变 ， 颜色和边框同样不会改变 。
但是经常我们会通过触发某个触发事件来更改矩形的文字 ， 如果变化后的文字长度不同于原文字长度 ， 那么矩形的颜色或者边框不会跟着文字的长度改变而改变（因为矩形的宽一直没有改变） 。
典型应用：按钮文字变更、toast提示母版 ，需要矩形的长度跟随文字长度变化而变化 。
一、如何让矩形宽度跟随文字长度变化？
技能点：
- 文字的字号=文字的像素宽度 。
- 理解 width（像素宽度）和 length（文字长度/个数） 。
本文插图
元件准备
2. 具体操作
1）设置按钮点击事件
1.更改显示文本的文字 ， 可以多写几个 。
本文插图
2.设置显示文本的宽度等于 文字个数(显示文本.length)*字号+1（*+1的原因是矩形框没有文字的时候也会占1个像素 ， 有文字的时候要加上这个像素 ， 有兴趣的同学可以自行验证） 。
本文插图
设置显示文本的宽度
本文插图
添加显示文本的文字为局部变量
本文插图
添加变量 ， 设置函数公式[[LVAR1.length*13+1]]
注意：当显示文本的左右有填充的时候 ， 需要把填充的像素一起加上 。
本文插图
此时函数公式变成[[LVAR1.length*13+20+1]]
3. 预览效果
本文插图
以下为实验数据：
验证： 文字的字号=文字的像素宽度 。
计算当前字号下每个字的像素宽度 ， 这里设置的是13号字号 。 把文本矩形复制成四份 ， 分别设置每个文本矩形的文字个数为1、2、3、4个 。 分别记录每个文本矩形的宽度 ， 相减即可的出每个字的像素宽度为13 。
本文插图
相减可得出 ， 每个字的宽度为13 。
结论：文本矩形的宽度=文本的字数x文字的字号+1（ 矩形框没有文字的时候也会占1个像素 ， 在有文字的时候要加上1个像素 ） 。
本文由 @Haven 原创发布于人人都是产品经理 。 未经许可 ， 禁止转载
【|Axure 矩形长度跟随文字的长度变化】
推荐阅读
- 新机发布|Realme提交新机专利设计：新机为中置矩形摄像模组
- 中年|Axure9原型设计：动态面板&内联框架实现可复用导航页
- 科学|学完长度测量后，小明同学用分度值为1mm的刻度尺，测量物理课本
- 胎气嘴|新增三种长度 Schwalbe推出不怕堵的真空胎气嘴
- |Axure 9 教程：手机端如何实现上下滑动？
- 线段|平行四边形中构造一线三等角，掌握方法可轻松求线段长度
- |Axure9原型设计：动态面板实现页面增删改查模式弹窗效果
- 技术编程|Axure入门案例系列——进阶轮播图