AxureRP7.0教程 Axure部件函数详解

原型库网站—讲师金乌原创发布，可自由转载，请注明出处！

Axure中文官网：www.AxureRP.cn

《AxureRP7.0函数变量运算符详解》

部件属性 Widget Functions

this	当前部件，指在设计区域中被选中的部件
target	目标部件，指在用例编辑器中配置动作时选中的部件
widget.x	部件的x轴坐标
widget.y	部件的Y轴坐标
widget.width	部件的宽度
widget.height	部件的高度
widget.scrollX	动态面板X轴的坐标
widget.scrollY	动态面板Y轴的坐标
widget.text	部件上的文字内容
widget.name	部件的名称
widget.top	部件的顶部
widget.left	部件的左侧
widget.right	部件的右侧
widget.bottom	部件的底部

 

 

this        当前部件，指在设计区域中被选中的部件



定义：

this        当前部件，指在设计区域中被选中的部件

---

实例：



查看案例演示



使用 this.text 获取当前选中部件上的文字内容

第一步，拖拽2个文本部件（矩形）到设计区域

分别对其命名为1、2，并在部件1中输入任意文字。

---

第二步，给部件1添加事件

选中部件1，在部件交互面板中双击鼠标点击时事件，在弹出的用例编辑器中选择 设置文本 动作，
在右侧的配置动作中勾选部件2 前面的复选框，在底部设置部件2的值为 [[this.text]]，点击确定关闭用例编辑器。

F5 键预览原型，查看效果

 

target         目标部件，指在用例编辑器中配置动作时选中的部件

---

定义：

target         目标部件，指在用例编辑器中配置动作时选中的部件。

---

实例：


查看案例演示




在这个案例中，我们使用 [[Target.text]] 给用例编辑器中选中部件（目标部件）添加文字。

第一步，拖拽部件到设计区域

拖拽两个文本部件（矩形）到设计区域，分别命名为 1、2

---

第二步，给部件1添加事件

在设计区域中选中部件1，在部件交互面板中双击鼠标点击时，在弹出的用例编辑器中添加设置文本动作，在右侧配置动作中选中部件2.
设置部件2的值为“[[target.text]]变” ，意思就是当鼠标点击部件1时，就在部件2的文本内容中添加一个“变”字。点击确定，关闭用例编辑器。

F5键，快速预览原型。

 

 

 

widget.x         部件的x轴坐标

---

定义：

widget.x ，获取指定部件的X轴坐标；

---

实例：


查看案例演示



在本案例中，我们将获取当前按钮的X轴坐标和按钮左侧图片的X轴坐标；

案例1：

设置 形状按钮部件的值 为 [[this.x]]

输出： 330

案例2：

设置 形状按钮部件的值为[[LVAR1.x]]

LVAR1 = 图片部件

输出：100

 

 

widget.y         部件的Y轴坐标

---

定义：

widget.y         获取指定部件的Y轴坐标

---

使用方法与 获取部件X轴坐标方法相同。



查看案例演示

 

 

widget.width         部件的宽度

---

定义：

widget.width   可获取指定部件的宽度。

---

实例：


查看案例演示


在本案例中，我们使用 this.width 查看选中按钮部件的宽度

在设计区域中选中按钮部件 ，在部件交互面板中双击 鼠标点击时 事件，在弹出的用例编辑器中 添加 设置文本 动作，
设置当前部件的值为 [[This.width]]  ，点击确定关闭用例编辑器。

预览原型，输出：240

 

 

widget.height         部件的高度

---

定义：

widget.height    可获取指定部件的高度

---

实例：


查看案例演示



在本案例中，我们使用 this.height 来获取形状部件的高度；

设置形状部件的值为 [[This.height]]

输出：40

 

 

widget.text         部件上的文字内容

---

定义：

widget.text    可获取指定文本部件上的文字内容；

---

实例：


查看案例演示



在本案例中，我们使用 widget.text 来获取部件上的文字；

1.拖拽两个矩形部件到设计区域，分别命名为：poem 和 1 ；

2.给部件poem 添加内容；

3.给部件1添加鼠标点击事件，在弹出的用力编辑器中新增 设置文本 动作，在配置动作中勾选当前部件，并设置部件1的值。点击 FX 在弹出的编辑文字对话框中新增局部变量，设置 LVAR1 = 部件 poem ，然后在对话框上面部分点击插入变量、属性、函数或运算符，将局部变量 LVAR1 插入。

4.点击两次确定回到设计区域，F5键快速预览。

输出：
自幼曾攻经史，长成亦有权谋。恰如猛虎卧荒丘，潜伏爪牙忍受。
不幸刺文双颊，那堪配在江州。他年若得报冤仇，血染浔阳江口!

 

widget.name         部件的名称

---

定义：

widget.name         获取指定部件的名称

---

实例：


查看案例演示



在本案例中，我们使用 this.name 来获取被点击部件的名称

1.拖拽形状按钮部件到设计区域，并给其命名。

2.给形状按钮部件添加鼠标点击事件，在弹出的用例编辑器中添加  设置文本动作，在右侧配置动作中勾选当前部件，并设置部件值为 [[This.name]]

3.点击确定关闭用例编辑器，F5预览效果

输出：我的名字叫： widget.name

 

 

widget.top         部件的顶部

---

定义：

widget.top         用于获取部件的的顶部位置或坐标。

widget.top         部件的顶部
widget.left         部件的左侧
widget.right         部件的右侧
widget.bottom         部件的底部

通常用于判断部件上下左右的坐标位置或者部件之间的上下左右是否相交的条件判断中；

---

实例：


查看案例演示



在本案例中，我们对上述部件属性进行综合讲解，

当我们拖动部件1的时候，

如果部件1的顶部（top）小于100 ，就将其移动到拖动前的位置；
如果部件1的底部（bottom）大于200，就将其移动到拖动前的位置；
如果部件1的左侧（left）小于300，就将其移动到拖动前的位置；
如果部件1的右侧（right）大于500，就将其移动到拖动前的位置；

1.给部件1（动态面板）添加正在拖动时事件，双击正在拖动时，在用例编辑器中新增移动 动作，在配置动作中将动态面板设置为 拖动；

2.给部件1 添加拖动结束时事件，新增用例如下：

case1 : if "[[LVAR1.top]]" < "100"
移动 动态面板 到拖动前位置

case2 ： else if "[[LVAR1.bottom]]" > "200"
移动 动态面板 到拖动前位置

case3 : else if "[[LVAR1.left]]" < "300"
移动 动态面板 到拖动前位置

case4 : if "[[LVAR1.right]]" > "500"
移动 动态面板 到拖动前位置

 

 

widget.scrollX       动态面板X轴的坐标

---

定义：

widget.scrollX        动态面板滚动时X轴的坐标；

---

语法：

widget.scrollX

 

 

widget.scrollY       动态面板Y轴的坐标

---

定义：

widget.scrollY        动态面板滚动时Y轴的坐标；

---

语法：

widget.scrollY