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

AppMaster提供以下UI组件：

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

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

弹性容器

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

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

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

首先，将 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%。

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

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

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

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

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