AxureRP10Beta版体验：软件界面、动态面板、中继器、错误状态和距离约束

—文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

元件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

2、动态面板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

改动有点多，不过确实比以前好用了，主要体现在可以一次同时编辑多个状态，点击右上角的网格状图标即可进入多状态同时编辑，且默认时固定了动态面板的大小，不是自适应内容了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

多状态编辑模式如下，很方便设置每个状态里的内容：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

3、中继器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

中继器对数据的编辑方式做了改变，以前是通过“每项加载时”事件来显示数据，现在直接提供了一个表格化的方式编辑数据，然后每个字段通过“连接元件”的方式来与元件进行关联，可以直接选择目标元件，这样更容易理解些。可以通过表格的右侧或底部的+号按钮添加数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

元件库里也提供了两种方式的中继器，一种是表格，一种是图文卡片，这个也挺好。9的版本的中继器默认是表格方式，而且默认元件是一个矩形框，让很多第一次接触中继器时不知道咋用。而10版本里卡片式直观地告诉使用者中继器可以实现漂亮的图文布局样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

4、错误状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

错误状态主要是针对输入框这样的元件使用的，例如如果我们手机号码输入的框不正确，你可以设置错误状态的样式，如红色边框。之前的版本其实也可以通过设置选中时的样式来设置，只是不太容易理解，可能你还想不起来用这样的方式，现在有个单独的错误状态可以设置了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

在元件上右键，选择样式效果，在弹出的窗口里选择“错误”状态，设置相关的状态，例如下面的输入框在输入错误时，显示红色边框，浅红色背景。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

动作列表里添加了设置错误状态和去掉错误状态的动作，方便我们设置交互。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

做了个例子，点击阅读原文看看这种交互效果，如果两个输入为空，则显示错误状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

5、距离约束文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

这个感觉用处不是太大，也没想到在什么场景下使用更合适，我们看看是怎么使用的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

可能一开始看到这个介绍不知道说的到底啥意思，测试下之后可以看到它的实际用处仅仅是在设计状态时使用的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

这个功能是在将一组元件编组后，设置每个元件在这个编组中的位置，距离边缘的显示位置。举个例子，下面这里有5个矩形框元件，上下左右和中间分别有一个，为了演示，用中间的矩形框来说明。选中5个元件ctrl+G将它们编成一组，然后选中中间灰色的矩形，看一下右边样式面板里多了个“调整约束条件”：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

编组里的每个元件都可以设置约束，以选择上面约束为例，点击竖线选中，表示当你在调整这个编组的大小时，当前这个灰色元件始终保持与上方距离不变：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

好了，我们在这个编组元件外的界面上其它地方点击一下，然后选中这个编组，选择上方的调整占向下拖动调整大小：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

当你调整成如下大小时，虽然整体高度小了，但灰色元件距离上方的距离没有变化：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

其它位置的约束的意思类似，可以自己试一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html

感觉。。。用处不太大。。。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21062.html