构建用户界面

为了设计可用性和结构化界面，AppMaster Web Designer 提供了广泛的原子 UI 组件。这些组件可以以各种方式组合和分组，以符合您的目的和目标。

AppMaster提供以下UI组件：

• 容器：用于逻辑地构建和分组其他组件的基本元素。
• 模态框和抽屉：用于在不离开当前屏幕的情况下显示附加信息或操作的交互式组件。
• 动态值输出组件：包括用于动态呈现数据的列表、网格和表格。
• 基本 UI 元素：例如按钮、文本和图标，对于基本界面交互至关重要。
• 导航组件：包括垂直和水平菜单、选项卡和类似的导航工具。
• 表单元素：用于用户交互和数据收集的各种输入和控件。

定期更新组件库可增强您更高效地开发 Web 应用程序的能力。

让我们为简单的计算器应用程序构建一个 UI，以演示 AppMaster 拖放网站构建器的可能性。该应用程序将根据输入值显示各种数学运算的结果。

弹性容器

使用Flex Container ，您可以轻松管理容器内所有子元素的对齐和堆叠管理。

Flex Container是构建网页结构的基础组件。 AppMaster Web应用程序设计器中的Flex Container允许用户灵活地排列子元素（小部件或容器）。它支持水平和垂直对齐，使开发人员能够创建适应不同屏幕尺寸的复杂布局。

添加容器

我们将使用两个主要容器：一个用于数据输入，另一个用于显示包装在一个公共容器中的计算结果。

首先，将Flex 容器添加到画布中以容纳所有其他元素。

在“外观”面板中，您可以探索一系列设置：

• 元素 ID：用于在业务流程中引用容器的唯一标识符。
• 通用组：用于定义组件默认状态的设置，例如可见性和光标样式。
• Flex 子组：确定元素在 Flex 父组件中的行为方式。
• 布局：用于在容器内排列子项的设置。
• 尺寸：指定元素的尺寸。
• 间距：调整元素内部和周围的空间。
• 背景：背景颜色和图层的选项。
• 角半径、边框、阴影：元素边缘、边框和阴影效果的自定义。
• 工具提示：添加悬停或焦点操作的工具提示。

定制您的主容器。例如，我们将Direction设置为水平并调整Gap 、 Padding 、 Corner radius和Borders 。

接下来，在主容器中添加另一个Flex 容器，以便表单输入值。将其设置为全宽以填充父容器中的可用空间。

复制此容器（使用CTRL/⌘+D ）以创建一个单独的块来显示结果。将宽度属性设置为 30%。

添加用户界面元素

要继续构建您的应用程序，需要添加必要的 UI 元素。

添加表格

我们的业务流程要求用户输入两个数字，都是浮点数类型。为了实现这一点，请添加两个浮点输入和一个按钮来启动计算过程。

将左侧Flex 容器方向切换为垂直，并为嵌套元素添加一个间隙，以便在它们之间留出一点空间。在此 Flex 容器内添加第一个值的输入浮点值，我们将其标记为“X”：

• 将输入浮动元素拖放到左侧容器。
• 在外观面板中，通过添加标签和占位符来个性化该字段。
• 微调字段的外观以适合您的应用程序的设计。

选择画布上添加的字段并使用CTRL/⌘+D复制它。修改重复字段的标签和占位符以表示第二个值“Y”。

现在，将按钮元素拖放到添加的字段下方。在“外观”面板中，调整按钮以覆盖整个宽度。这可以通过将Flex Child组中的Align属性设置为Stretch来实现。

输入按钮的标签，并且可以选择添加图标以增强其视觉吸引力。

添加这些元素后，最好对它们进行重命名，以使其清晰且易于识别。这使得您可以更轻松地在业务流程中引用它们，从而增强可理解性并加快开发过程。

添加结果块

在父容器的右侧，我们将配置一个空间来显示执行业务流程后的结果。首先，将此容器的Direction属性设置为Vertical并添加一个小间隙以保持元素间隔整齐。将其宽度更改为 30%。

在此右侧容器中，插入一个新的Horizo​​ntal Flex 容器，并在其中添加一个表示操作的图标元素、一个带有等号的文本块以及将在其中显示操作结果的文本块。复制此容器四次，每次更新我们定义的数学运算。

使用外观面板根据需要自定义每个元素。

添加提示块

为了增强界面的可用性，我们制作了一个占位符，该占位符将显示直到获得结果。为此，添加一个额外的Flex Container ，镜像右侧容器的宽度 (30%)，并在其中放置一个带有描述性提示的文本块。

包含结果的容器的一个关键特征是其初始可见性状态。默认情况下，将可见开关设置为关闭，最初使其不可见。

隐藏元素

我们只有在业务流程执行并得到结果后，才会让这个容器可见并更新数据。分配文本块名称非常重要，以确保在创建业务流程和编写要显示的结果期间轻松识别。

🎉干得好！我们为我们的应用程序制作了完美的 UI，并准备为我们的元素添加交互性。