罗凤
在原型设计中，经常会遇到类似甚至相同的场景，会用到之前做好的由基本元件组成的模块化元件组合，想要复用就要去之前的项目文档中翻找，不仅要花费大量的时间，还耗费不少精力，遇到做过但没有保存的情况，更是要重新制作一次。这时候我们可以制作自己的元件库，遇到会重复利用的元件组合时，保存在元件库中，能够提高设计工作的效率，节省不少时间和精力。
本期，我们通过制作常用的两种进度条，来演示如何自定义元件库。
1、制作元件库的方法
元件库的制作非常简单，只需要点击“文件”-----“新建元件库”，在“元件”下编辑并重命名widget，然后保存元件库就可以。
使用时，先加载自定义的元件库，后面就可以和基础元件库一样，从里面拖拽元件到画布中使用了。
2、实例1 制作自动加载进度条
进度条在加载事件较长时使用，可以减少人的焦虑心态，转移用户注意力，并给用户提供事情进展的动态信息，给用户更好的产品体验，使用广泛，复用率高，适合做成组合元件，放入自定义元件库。
2.1 新建元件库
将widget1改为进度条，在画布中拖入一个矩形，改变长宽，为细长形，并复制成另一个矩形。将两个矩形分别命名为“bg”“进度条”，设置两个矩形的圆角为“10”，拉短“进度条”的长度，并将其填充和边框颜色改为蓝色。
2.2 为进度条设置“加载时”事件，加载时将长度改为“0”
2.3 拉取一个标签，为进度条“设置调整大小时”事件
调整大小时，当进度条长度小于“bg进度条长度时”，为了避免卡顿和速度太快看不到效果，先等待10毫秒，然后设置进度条长度为“进度条长+bg长/100（取整）”，设置标签文本为“进度条长度/bg长度*100%”并取整数。保存当前元件库，演示效果，发现实现了进度条自动加载，标签自动改变加载百分比的效果。
2.4 添加加载完成标签和确认按钮
将bg、进度条、标签横向中心对其，标签纵向居中。另外拖出一个标签“加载完成”、一个“确认”按钮，并将这两个元件设为隐藏。
将“进度条”调整大小时事件，分为用例1：“bg宽度-进度条宽度bg宽度/100”时，和用例2：“bg宽度-进度条宽度≤bg宽度/100”时两种条件。用例2增加显示加载完成标签和确认按钮。
演示运行效果：
3、示例2 交互效果进度条
在自动加载进度条基础上，可以将改变进度条大小事件改为用按钮点击触发，即可实现交互效果进度条。
新建winget，重命名为“可交互进度条”。画布中拖入一个动态面板，设置两个状态，复制“进度条”的内容到状态2，状态1中拖入一个按钮，文字改为“开始加载”，并为其增加点击时，改变“进度条”长度为0，切换动态面板到状态2。去掉“状态条”的加载时事件。
点击运行效果：
4、在项目中应用自定义元件库
在项目中载入自定义元件库，创建测试进度条页面，页面分别拖入“进度条”、“可交互进度条”
5、自定义元件分组
在日常工作中，我们可以自定义常用的元件，并放在自定义的元件库中，方便复用。如果元件多了，还可以在元件库中分类存放，选择和查找一目了然，更加方便快捷。
总结
以上就是本期的内容，制作并使用自定义元件库。掌握了自定义元件库的方法，我们就可以为自己定制独一无二的元件库，将大大提高设计效率。
