[Sketch技巧]如何制作自适应文本长度的光标效果

静电说：Sketch中有不少值得研究的小技巧，可以为设计工作带来不少便利。比如今天就有同学问到，如何能在Sketch中让文本输入框后边的光标跟随字段长度移动呢？看下图。

效果就是这样啦。 今天静电研究了一下，在Sketch中完成这样的效果还是很简单的。 一起来看！

将文本框，文本字段以及后边的输入提示竖条制作好，排列到合适的位置。 如下图。

接下来，确定文本外的浅色外框是否需要跟随字段长度一起扩展。 一般情况下，我们会选择固定宽度。

将文本字段设置为左对齐（根据你自己的实际情况来）

这个功能可以实现组件之间根据Overrides的宽度或者高度自适应。 不管是横向或者是纵向，我们都可以在此设置。

设置好后，我们就可以在组件的Overrides中随意输入文本，文本框字段后方的输入提示条会跟随文本框长度而移动。

如果你希望外侧的文本输入框也随着长度移动，那么可以再次选中刚刚建好的symbol和文本输入框，添加另一个嵌套组件。 OK，这个小技巧就讲完了，希望大家能从中得到启发。 更灵活的使用Symbols的自适应特性作出更好玩的效果。

静电已经为大家准备好Sketch源文件

公众号回复“ 源文件 ”下载研究一下吧

~笔芯~