百度贴吧的登录方式有两种，扫描二维码登录或者通过用户名与密码登录。
当用户点击登录面板右上方的蓝色三角形图标时，能够切换不同的登录方式。
原网页地址：http://tieba.baidu.com/f/user/passport
实现这样的功能模块，可以通过组合实现。
将两个不同登录面板的组合重叠摆放，显示其中一个的时候，隐藏另外一个。
这样的解决方案没有什么问题，只是元件重叠摆放不方便修改，交互动作略有复杂。
如果通过动态面板来实现相同功能模块的话，会更简单、清晰。
动态面板不但可以容纳其它元件，而且还可以分层容纳。
动态面板的每一层称为“状态（State）”。
首先，我们准备好两个登录面板之后，不需要进行组合操作，而是将默认显示的扫码登录面板先[转换为动态面板]。
此时，在概要面板中，我们能够看到刚才的扫码登录面板被放入了一个动态面板的“State1”状态中。
接下来，我们要做的是，把用户名密码登录的面板，放入动态面板的另一个状态中。
在概要面板中，动态面板名称的后方点击添加状态的按钮。
此时，概要面板中会出现新的状态“State2”，我们将用户名密码登录面板的所有元件在概要中点中，拖入“State2”中。
此时在画布中，会自动打开动态面板“State2”的状态编辑区。
我们需要把用户名密码登录面板的元件，摆放在这个状态的原点位置上。
警告：快捷工具栏中元件的坐标，X和Y轴的数值都是“0”。
完成两个状态内容的添加之后，我们可以为这两个状态重命名。重命名可以在概要面板中完成，也可以在动态面板的编辑区上方完成。
在修改状态名称时，我们还能够发现，点击状态的名称就能切换到相应状态的编辑区。
另外，我们也可以在概要面板中，为动态面板添加一个自定义名称，例如“登录面板”。
完成两个状态的编辑之后，需要给图标添加交互事件。
在用户名密码登录的状态中，我们点中二维码图标，添加交互事件。
在二维码图标被[单击时]，[设置面板状态]到“扫码登录”的状态。
同样，在扫码登录的状态中，我们还要点中手机图标，添加交互事件。
在手机图标被[单击时]，[设置面板状态]到“用户名密码登录”的状态。
完成这些交互事件之后，关闭状态编辑区，回到页面中，将底部元件摆放在动态面板下方。
此时，我们就通过动态面板完成了同样的功能模块。
温馨提示：因为案例内容较多，并未对元件的样式设置进行讲解，如有问题可参考《常用样式设置》。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 动态面板的应用（2）