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

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

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

STEP

01

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

STEP

02

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

STEP

03

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

STEP

04

选中文本字段，及文本字段后边的输入提示条，点击设置为组件（symbol），在弹出的提示框中，按下图设置。

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

STEP

05

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

STEP

06

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

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

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

~笔芯~