我是如何使用Sketch和口袋引擎协同进行原型设计的（二）

上期内容：

简介

Sketch？

- 极其方便的原型设计软件，能让UI设计更为简单、高效。

口袋引擎？

- 移动设备上的可视化编程软件，在手机上，三下两下就能创建出可使用的程序。

Sketch + 口袋引擎？

- 无论何时，无论何地，使用口袋引擎对Sketch设计项目进行封装，使得您的项目能如同一个App一般独立运作于移动设备上，同时这将是一个展示设计的好方法。无论是谁，只要也安装了口袋引擎，就能在不同设备、不同地点查看您的项目。因为口袋引擎是一个拥有完整“控制流”，“面向对象”等特性的编程软件，所以您可以创建出一些不同寻常的效果，例如为您的原型设计添加逻辑运算，添加真正可用的相机，或是直接插入视频、网页等，使其拥有极强的表现力。

想象一下，当你在上海使用Sketch完成了一个原型设计，想要让北京的同事预览到效果，您只需将其包装到口袋引擎中，然后直接发送给对方，此时对方接收到的既不是一个充满辅助线的设计图，也不是一个需要麻烦安装的成品App，而将会是一个直接在移动设备上展示、方便快捷且拥有强大表现力的“小程序”。

开始操作

本文将从上一期“基本封装”过程之后开始讲解，继上一期后，我们得到了一个简单页面跳转的Sketch项目封装，这期中我们将要完成。

使得输入框变得可用，需要输入正确的账号密码才能触发调整页面。
创建系统提醒框，当账号密码错误时发送提醒消息。
引入系统的状态栏，所有状态将是即时更新的。
可上下翻滚的文字框，在其中展示文本内容。

所以，我们首先对准备进一步封装的Sketch项目进行一些处理。例如，我们想要使用实体输入框，那么久移除设计中的输入框图像，我们想要实体状态栏，就移除设计中的状态栏图像。总而言之，就是将需要用实体组件替换的地方留白。像图中一样，将左侧项目修改为右侧项目。

导出新的切片图片后，我们将其替换至上一期结束完成的项目中，然后完成准备工作，正式开始！

1、创建输入框

像图中一样，我们创建两个输入框在相应位置。

然后是长按两个框框，在两个框框的“属性”中对两个框框的一些属性进行调整，将其字体颜色、背景颜色、文字对齐、提示内容、提示颜色、字体等调整为下面这个样子：

* 您可以将密码框设为“安全输入”，这样当输入内容时就会变成一个个黑色圈圈，别人就看不到辣。

然后在将代码这样改：

如果此时运行，你会发现点击按键时如果密码不对，将会提示异常，而当两侧都写上Admin之后再登录就能成功登录。

那么现在咱们来分析一下这段代码：

点击登录按键时 {
这一段应该不用多说辣，意思就是点击这个按键的时候执行大括号 { } 里面的这堆事情。

if 账号框.文本 = “Admin” && 密码框.文本 = “Admin” {

这一段的意思就是如果此时账号框里面的文本等于“Admin”，同时密码框里面的文本等于“Admin”就执行大括号 { } 里的事情。在口袋引擎中 “||”代表的是“或”，“&&”代表的是“和”，所以 if a = 2 || a = 3 { } 的意思就是“如果a=2或者a=3都执行大括号里的内容”，if a = 2 && b = 3 { } 的意思就是“必须a = 2以及b = 3都满足的时候才执行大括号的内容”。

至于“转到页面”和“提示”两句话，分别是页面跳转的接口和调用系统提示的接口

关于更多接口的内容和详细信息，您可以在“参考文档”中找到。