Axure RP - 条件逻辑


在本章中,我们将讨论Axure RP中使用的条件逻辑。

Axure 中的 If - Then - Else

就像任何其他编程工具一样,Axure 也支持条件逻辑以在原型中创建增强的交互。一旦您熟悉了如何提供交互,下一步就是为交互提供条件逻辑。

以下是条件逻辑的简单简洁流程 -

  • 如果单击特定的小部件/屏幕
  • 然后,执行特定的操作/交互
  • 否则,保持/更改小部件或屏幕的状态

为了更好地理解这一点,让我们从前面的示例继续我们的流程。为此,我们需要熟悉条件生成器。

条件生成器

双击任何交互,例如 OnClick。您将能够看到案例编辑器,如以下屏幕截图所示。

条件生成器

单击案例名称附近的按钮 – 添加条件。它将显示在下面的对话框中。

添加条件

如描述下所示,条件生成器将根据条件部分中选择的条件创建 If-Then-Else 流。

让我们在此按钮上创建一个条件。

一旦动态面板可见,我们希望显示隐藏图像按钮。在上一个示例中,我们使动态面板在单击“显示图像”按钮时可见。现在,让我们使另一个按钮“隐藏图像”可见。

关闭条件生成器,然后返回到设计区域。

从公共库下的库中插入隐藏图像按钮。重申一下,最佳实践是在将 UI 元素插入设计区域后立即对其进行命名。

右键单击“隐藏图像”按钮,然后单击“设置隐藏”。该按钮将从设计区域隐藏,如以下屏幕截图所示。

隐

现在,让我们回到“显示图像”按钮的交互。

首先,在显示图像按钮交互下,双击案例 1,您将能够看到案例编辑器。使用“显示/隐藏”操作选择 hideImageButton 并将其可见性设置为显示。

同样,使用“显示/隐藏”操作,选择 showImageButton 并将其可见性设置为隐藏。

我们已经管理了“隐藏图像”按钮的可见性,以便当我们单击“显示图像”按钮时,将显示该按钮。

完整的情况如下图所示。

健康)状况

让我们创造条件。

在设计区域下,单击隐藏图像按钮。在“检查器”部分中,单击“添加案例”。

在“添加案例”下,单击“添加条件”按钮。根据前面提供的背景,使用条件生成器中的下拉值创建条件集。

条件设定

简单来说,在上述条件下,我们正在检查动态面板 showImageDynamicPanel 是否可见

现在,让我们设计隐藏图像按钮的交互,配置如下 -

配置
  • 选择显示/隐藏操作。
  • 选择小部件 showImageDynamicPanel。
  • 将可见性设置为隐藏。

同样,重复显示 showImageButton 和隐藏 hideImageButton 的练习。

完成后,单击“确定”关闭案例编辑器。

然后,单击预览以查看完成的更改。

成功的结果将如下面的屏幕截图所示。

单击“显示图像”按钮时 -

显示图像按钮

单击隐藏图像按钮时 -

单击图像按钮