不论是移动端还是PC端的登录，目前大多都是可以切换显示与隐藏密码框中所输入的内容，以保证用户在登录报错的时候，可以确认自己所输入面的正确性，修正后再次进行登录。
Axure RP升级到9之后，元件及交互的使用与之前的RP 8相比，都有了一些不同，借鉴了小楼老师Axure RP8.0教程后，基于Axure RP 9来简单聊一下如何用借助态面板实现密码输入框字符显示/隐藏切换。
第一步，也先来捋一下，我们用到的元件（图1）
图1-整体元件组成示意图1、隐藏密码icon（非SVG图片，而是导入的外部元件）
2、显示密码icon（非SVG图片，而是导入的外部元件）
3、动态面板，使用两个状态，两个状态中分别放入不同类型的文本框，在同一个区域，切换不同的元件类型
第二步，不同元件的样式及交互设置
1、隐藏密码icon（图2）
想要实现的需求是，点击“隐藏密码icon”后，出现的是“显示密码icon”，因此选择为该元件添加【单击时】的【显示/隐藏】事件，单击时隐藏当前，显示另一个
图2-隐藏密码icon交互设置
2、显示密码icon（图3）
逻辑同1，只是要反向思考，因为我们这次想实现的是：点击“显示密码icon”后，出现的是“隐藏密码icon”，同样为该元件添加【单击时】的【显示/隐藏】事件
图3-显示密码icon交互设置
3、动态面板-密码框-元件样式设置
3.1 State 1-隐藏密码文本框（图4）
图4-动态面板-State1 - 密码类型文本框3.2 State 2-显示密码文本框（图5）
图5-动态面板-State2 - 文本类型文本框
3.3 两个State下的文本框边框都需要进行隐藏（图6）
图6-文本框边框隐藏
4、动态面板-密码框-元件交互设置
我们想要实现的一直都是：初始输入时密码为隐藏状态，点击“隐藏密码icon”后，出现“显示密码icon”，且密码框内的密码变为可见状态。就需要为动态面板的文本框添加【文本改变时】的【设置文本】事件，使其中一个文本框的文本改变时，另一个文本框的文本也能随之同步。
4.1 State 1-隐藏密码文本框（图7）
图7-State 1-隐藏密码文本框-交互设置
4.1 State 1-显示密码文本框（图8）
图7-State 2 -显示密码文本框-交互设置
第三步，确认最终交互设置
动态面板-文本框的交互改变，也是基于“显示密码icon”与“隐藏密码icon”的【单击时】事件，因此将动态面板的【文本改变时】的【设置文本】事件，添加到“显示密码icon”与“隐藏密码icon”的【单击时】事件内。
最终交互设置如下（图8）：
图8-最终交互
通过以上步骤，我们就成功的在Axure RP9中借助动态面板实现密码输入框字符显示/隐藏切换交互。
最近刚升级使用Axure RP9 ，许多还在摸索中，以上如有不足之处，欢迎评论区批评指正，谢谢。
参考资料：
网友评论