按钮是 Web Apps 编辑器中最简单的元素,但在完成的应用程序界面中扮演着主要角色之一。此外,今天我们为您提供了一个仅由按钮组成的应用程序。这个任务可能看起来有点奇怪,但如果你做到了,你将学习如何自定义按钮,了解使用编辑器的基础知识和整个平台的逻辑。

让我们根据《爱丽丝梦游仙境》这本书做一个简短的测验。让我们看看用户是否还记得爱丽丝第一次遇到柴郡猫的地方。

我们的应用程序将具有:

  1. 问题文本:爱丽丝第一次见到柴郡猫是在什么地方?
  2. 选择按钮:疯狂茶会、公爵夫人之家、木头、槌球场。如果用户选择了错误的答案 - 带有它的按钮会消失,如果用户选择了正确的 - 所有带有错误答案的按钮都会立即消失。
  3. 告诉您答案是否正确的弹出消息。

顺便说一下,你还记得哪个选项是正确的吗?

如何创建一个按钮

使用鼠标指针(通过单击并按住左键)将“按钮”元素拖动到要放置按钮的区域。

您需要添加四个按钮 - 根据可能答案的数量。

自定义按钮外观

单击第一个按钮一次 - 设置窗口将打开。您会发现自己位于“外观和感觉”选项卡上,该选项卡负责按钮的外观。

1. 编辑以下字段:

  • 标签:按钮文字——输入第一个答案:“疯茶会”;
  • 图标:按钮图标——点击“选择图标”,选择你喜欢的一个(现在已经有2500多个了);
  • 大小:按钮大小 - 设置为“大”以使按钮变大;
  • 名称:这是应用程序中其他元素“看到”按钮的名称;每个按钮都需要一个唯一的名称 - 将按钮命名为“btn-mad_tea”。

编辑字段时,窗口顶部的图像将更改以显示应用设置后按钮的外观。

2. 当您填写所有字段时 - 单击“保存”。

  1. 使用名称:btn-duchess_h、btn-wood、btn-croquet_g,与第一个类比配置其余按钮。
  2. 单击“保存更改”将更改保存到您的应用程序 - 否则,一旦您刷新页面或关闭编辑器,这些按钮就会消失。

设置触发器和事件

现在您需要设置按钮的操作。让我们从正确答案的那个开始—— “公爵夫人之家” 。您的任务是向 Web Apps 编辑器“解释”:

  • 按钮的触发器是什么 - 意味着它应该对什么做出反应:按下;
  • 在这种情况下会发生什么事件:按钮消失;
  • 这个事件发生的地方,哪些元素发生了变化:其他按钮。

返回“公爵夫人之家”按钮设置并转到触发器选项卡。将显示为其添加的所有触发器:

  1. 现在只有一个 - “OnClick”。它是自动添加的,意味着当你点击它时按钮会起作用(这正是你需要的)。
  2. 除了“OnClick”之外,按钮的其他触发器也是可能的。带有描述的完整列表位于平台文档中。

现在您需要指定有关事件的信息(您将拥有其中三个 - 每个按钮一个)。单击“OnClick”旁边的“+”。事件设置窗口将打开。

在“目标组件”字段中,您需要指明事件将在何处发生,在“操作”字段中 - 它将是什么类型的事件。

隐藏所有错误答案

添加一个将隐藏 Mad-Tea Party 按钮的事件:

  1. 单击“目标组件”字段并通过唯一名称 btn-mad_tea 找到它。在操作字段中,选择适当的事件,在本例中为 - “隐藏按钮”。
  2. 点击“保存”。

将其余按钮配置为以相同方式隐藏。

  1. 完成后,“公爵夫人之家”按钮的触发器列表应该是这样的。
  2. 单击“保存”以保存更改。

现在您需要确保一切正常。

  1. 保存您的更改。
  2. 按发布应用程序的按钮(将其放置在 Internet 上),选择“开发”。
  3. 单击转到您的应用程序图标 - 它将在新选项卡中打开。

转到应用程序并确保当您选择正确的选项时,其余按钮消失。

单击时隐藏不正确的答案

现在让我们让带有错误答案“Mad-Tea Party”的按钮在用户点击时消失。在这种情况下,触发器(按下)和事件(消失)都属于同一个按钮 - 您只需要使用它。

打开按钮设置,转到“触发器”选项卡,向“onClick”触发器添加一个新事件。在“目标组件”字段中,选择“此组件(自身)”以指示按钮为其自身激活事件。 “Action”字段的值与上一个示例中的相同 - “Hide Button”。

保存所有更改并发布应用程序,切换到应用程序选项卡并刷新它。检查一切是否按预期工作:

现在调整 Wood 和 Croquet-Ground。保存、发布并再次测试。

按钮类型

太好了,答案有效。是时候添加一个问题了。当然,Appmaster.io 对此有特殊元素,但您还记得我们的任务 - 按钮而不是其他任何东西。所以让我们再添加一个。这次 - 不是主画布,而是页面顶部:

为了让它更有趣,请按照此屏幕截图填写问题:

现在使用不同类型按钮的配色方案“着色”:转到设置并将“类型”字段中的值切换为任何其他值。

我们是这样理解的,但是您可以选择您的选项,按钮的配色方案不影响其操作:

现在让我们继续最后一个任务 - 为用户设置消息。

更艰巨的任务

您可以以不同的方式在屏幕上显示消息。我们选择了最不寻常的一个:

- 首先,让我们确保当用户给出正确答案时,包含问题的按钮会自动停用。它们将变为灰色并停止响应点击。为此,我们使用了我们尚未考虑的启用(禁用)功能,以及我们已经熟悉的“onClick”。

- 然后我们会考虑一个新的触发器——onStateChange,当按钮的状态改变时触发。让我们将此触发器分配给“?” - 消息将显示在其上。

停用按钮

您可以通过切换“启用”字段选择器在其设置中手动启用或禁用按钮:

要设置自动切换,请打开“Duchess' House”按钮首选项并添加“onClick”触发器。在“目标组件”字段中,选择问题按钮之一,在“操作”-“禁用按钮”字段中。对包含问题的所有按钮重复此操作。它应该是这样的:

请记住保存所有更改,发布并检查应用程序是否正常工作。

现在,让我们将消息的开头绑定到按钮“?” (我们将其命名为“btn_qqq”)。让我们为它添加触发器“onStateChange”。它会在按钮状态改变时激活 - 例如,当它关闭时。

在“Target component”字段中选择“Application”(应用程序窗口中会弹出消息),在“Action”字段中——“Show UI Message”(向用户显示消息)。

  1. 在“消息样式”字段中,选择最适合您情况的样式。在我们的例子中,这是“成功”——关于成功完成的消息。
  2. 填写“标题”和“内容”字段 - 通知用户答案是正确的,或者只是写一些不错的东西。

保存、发布和测试。

结果

选择正确的选项,答案不正确的按钮应该隐藏,问题的文本应该消失,并且应该弹出确认消息。


当然,通过将消息绑定到正确答案按钮,可以更轻松地自定义消息。虽然今天我们不是在寻找简单的方法。此外,您已经足够了解无需我们的指示即可执行此操作。尝试自定义选择错误答案时会弹出的错误消息。它应该是这样的:

我们相信这个说明可以帮助您更好地了解Appmaster.io 。但如果不清楚(或者相反,可能太简单),请写信给我们技术支持的电报频道,了解您需要的说明。我们会写的!

如果您正在寻找有关Studio.appmaster.io的更多详细信息,请参阅我们的文档