按钮是 Web Apps 编辑器中最简单的元素，但在完成的应用程序界面中扮演着主要角色之一。此外，今天我们为您提供了一个仅由按钮组成的应用程序。这个任务可能看起来有点奇怪，但如果你做到了，你将学习如何自定义按钮，了解使用编辑器的基础知识和整个平台的逻辑。
让我们根据《爱丽丝梦游仙境》这本书做一个简短的测验。让我们看看用户是否还记得爱丽丝第一次遇到柴郡猫的地方。
我们的应用程序将具有：
- 问题文本：爱丽丝第一次见到柴郡猫是在什么地方？
- 选择按钮：疯狂茶会、公爵夫人之家、木头、槌球场。如果用户选择了错误的答案 - 带有它的按钮会消失，如果用户选择了正确的 - 所有带有错误答案的按钮都会立即消失。
- 告诉您答案是否正确的弹出消息。
顺便说一下，你还记得哪个选项是正确的吗？
如何创建一个按钮
使用鼠标指针（通过单击并按住左键）将“按钮”元素拖动到要放置按钮的区域。
您需要添加四个按钮 - 根据可能答案的数量。
自定义按钮外观
单击第一个按钮一次 - 设置窗口将打开。您会发现自己位于“外观和感觉”选项卡上，该选项卡负责按钮的外观。
1. 编辑以下字段：
- 标签：按钮文字——输入第一个答案：“疯茶会”；
- 图标：按钮图标——点击“选择图标”，选择你喜欢的一个（现在已经有2500多个了）；
- 大小：按钮大小 - 设置为“大”以使按钮变大；
- 名称：这是应用程序中其他元素“看到”按钮的名称；每个按钮都需要一个唯一的名称 - 将按钮命名为“btn-mad_tea”。
编辑字段时，窗口顶部的图像将更改以显示应用设置后按钮的外观。
2. 当您填写所有字段时 - 单击“保存”。
- 使用名称：btn-duchess_h、btn-wood、btn-croquet_g，与第一个类比配置其余按钮。
- 单击“保存更改”将更改保存到您的应用程序 - 否则，一旦您刷新页面或关闭编辑器，这些按钮就会消失。
设置触发器和事件
现在您需要设置按钮的操作。让我们从正确答案的那个开始—— “公爵夫人之家” 。您的任务是向 Web Apps 编辑器“解释”：
- 按钮的触发器是什么 - 意味着它应该对什么做出反应：按下；
- 在这种情况下会发生什么事件：按钮消失；
- 这个事件发生的地方，哪些元素发生了变化：其他按钮。
返回“公爵夫人之家”按钮设置并转到触发器选项卡。将显示为其添加的所有触发器：
- 现在只有一个 - “OnClick”。它是自动添加的，意味着当你点击它时按钮会起作用（这正是你需要的）。
- 除了“OnClick”之外，按钮的其他触发器也是可能的。带有描述的完整列表位于平台文档中。
现在您需要指定有关事件的信息（您将拥有其中三个 - 每个按钮一个）。单击“OnClick”旁边的“+”。事件设置窗口将打开。
在“目标组件”字段中，您需要指明事件将在何处发生，在“操作”字段中 - 它将是什么类型的事件。
隐藏所有错误答案
添加一个将隐藏 Mad-Tea Party 按钮的事件：
- 单击“目标组件”字段并通过唯一名称 btn-mad_tea 找到它。在操作字段中，选择适当的事件，在本例中为 - “隐藏按钮”。
- 点击“保存”。
将其余按钮配置为以相同方式隐藏。
- 完成后，“公爵夫人之家”按钮的触发器列表应该是这样的。
- 单击“保存”以保存更改。
现在您需要确保一切正常。
- 保存您的更改。
- 按发布应用程序的按钮（将其放置在 Internet 上），选择“开发”。
- 单击转到您的应用程序图标 - 它将在新选项卡中打开。
转到应用程序并确保当您选择正确的选项时，其余按钮消失。
单击时隐藏不正确的答案
现在让我们让带有错误答案“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”（向用户显示消息）。
- 在“消息样式”字段中，选择最适合您情况的样式。在我们的例子中，这是“成功”——关于成功完成的消息。
- 填写“标题”和“内容”字段 - 通知用户答案是正确的，或者只是写一些不错的东西。
保存、发布和测试。
结果
选择正确的选项，答案不正确的按钮应该隐藏，问题的文本应该消失，并且应该弹出确认消息。
当然，通过将消息绑定到正确答案按钮，可以更轻松地自定义消息。虽然今天我们不是在寻找简单的方法。此外，您已经足够了解无需我们的指示即可执行此操作。尝试自定义选择错误答案时会弹出的错误消息。它应该是这样的：
我们相信这个说明可以帮助您更好地了解Appmaster.io 。但如果不清楚（或者相反，可能太简单），请写信给我们技术支持的电报频道，了解您需要的说明。我们会写的！
如果您正在寻找有关Studio.appmaster.io的更多详细信息，请参阅我们的文档。
