常见交互

使用监听触发器隐藏和显示密码

学习如何使用「监听」触发来隐藏和显示密码字段。

Abhas Sinha, User Experience Designer @ Microsoft

August 13, 2023

使用监听触发器隐藏和显示密码

介绍

当说到敏感信息时，密码是其中一个最重要的。这就是为什么当您在网站或应用上注册或登录时，大多数网站会屏蔽或隐藏密码，以防止被窥视。但为了避免输入错误，最好的方法是在密码栏添加了一个显示/隐藏按钮，这样用户可以看到他们输入的内容。
在本教程中，我们将学习如何创建这个按钮，并显示和隐藏密码。ProtoPie 通过使用输入图层和「监听」触发使此过程变得简单。

您将学到什么

  1. 准备输入栏
  2. 点击显示/隐藏按钮时使输入栏排序
  3. 同步不同输入栏中的文本
最终，您将能够制作出这样的效果！
0
无交互的源文件 含交互的源文件

开始之前

为了快速开始，我们已经准备了一个包含显示/隐藏按钮的 Pie 文件。这个按钮使用了「条件」功能（学习如何使用条件制作切换按钮 ）来实现。

分步说明

1.准备好输入选区

  1. 在这些步骤中，我们将设置舞台，创建一个带有掩码的密码文本和一个普通的文本。
使用两个输入栏，一个包含掩码密码文本，另一个包含可见文本。
1
2. 选择 Hide 隐藏输入图层，在属性面板中找到键盘选项。将类型更改为文本密码，这将自动对在 Hide 隐藏输入图层中输入的所有文本进行掩码处理。
2
3. 预览原型。可以看到 Hide 隐藏输入图层中的文本被掩码处理。
3

2. 点击显示/隐藏按钮时使输入栏排序

下面将使用「排序」反应，使显示/隐藏按钮在 Hide 隐藏输入图层和 Show 显示输入图层之间进行切换。
  1. 选择 Show 显示输入图层。在现有的「单击」触发下，添加一个「排序」反应。「排序」反应可以改变图层的顺序。在本例中，需要将 Show 显示输入图层移到 Hide 隐藏输入图层的前面，以使其可见。
  2. 确保「排序」反应设置为前移一层。这个属性将 Show 显示输入图层向前移动一个图层，即移到 Hide 隐藏输入图层的前面。
  3. 将「排序」反应移动到第一个「条件」下，即标题为“Tap Show button 点击显示按钮”的条件下。现在，当点击 show 显示 按钮时，「排序」反应将会将 Show 显示输入图层移到 Hide 隐藏输入图层的前面。
4
  1. 为 Hide 隐藏输入图层重复相同的步骤。首先选择 Hide 隐藏输入图层，添加一个「排序」反应。再次确保「排序」反应被设置为前移一层。这次，「排序」反应放在第二个，即标题为"Tap Hide Button 点击隐藏按钮"的「条件」下。
现在，当点击 hide 隐藏 按钮时，「排序」反应会将 Hide 隐藏输入图层移到 Show 显示输入图层的前面。
💡 为什么使用「排序」反应？不能只使用「透明度」反应来隐藏和显示图层吗？
使用「透明度」反应制作也是可以的。但是，上面所讲的方法更快捷，只需对每个图层设置一个反应，而不需要每次都为两个层设置透明度值。
5. 打开预览窗，现在可以看到密码字段是被遮蔽的。但当按下显示/隐藏按钮时，Hide 隐藏输入图层消失后，会显示一个空的 Show 显示输入图层。为了正常显示输入的文本，继续进行下面的步骤。
6

3. 同步不同输入栏中的文本

使用「监听」触发来同步 Hide 隐藏输入图层和 Show 显示输入图层之间的文本。
  1. 选择 Hide 隐藏输入图层，添加一个「监听」触发，监听其文本属性。「监听」触发将根据所选的值监测指定图层上的任何变化。
在本例中选择了文本属性，因此每当输入文本发生变化时，该触发将被激活。
7
2. 在这个「监听」触发下，添加一个「文本」反应，对象选择 Show 显示输入图层。
3. 输入表达式 Hide.text。这个表达式将把 Hide 隐藏输入图层中输入的文本传给「文本」反应。
现在，每次在 Hide 隐藏输入图层输入文本时**，**相同的文本会自动复制到 Show 显示输入图层中。反之亦然。
8
4. 下面对 Show 显示输入图层进行同样的操作。选择 Show 显示输入图层，添加一个「监听」触发，监听其文本属性。
9
5. 在这个「监听」触发下添加一个「文本」反应，对象选择 Hide 隐藏输入图层。
6. 输入表达式 `Show`.text。这个表达式将把 Show 显示输入图层中输入的文本传给「文本」反应。
10
现在，每次在隐藏或显示图层中输入文本时，文本将分别被复制到显示或隐藏图层。

太棒了！

您已经学会了如何通过使用「监听」触发、「文本」反应和一个超级简单的内置表达式来创建隐藏的密码文本字段，并将其文本镜像到另一个图层上。您还学会了如何使用「排序」反应在两个图层的可见性之间切换。
恭喜您，已经完成了本节教程的学习，对ProtoPie 功能的掌握又更近一步！欢迎扫码加入ProtoPie 官方 QQ用户交流群 (69980214)，和各行各业UI/UX设计师讨论如何用ProtoPie 提高工作效率，一起互相帮助解决问题吧。
对该交互的制作还有问题？联系我们