技术文章

基本网格与带模板的网格简介

“网格”通常是指以二维网格状图案组织内容或 UI 元素的布局结构。它将应用程序的布局划分为包含不同数据的行和列，具体取决于应用程序的用途。出于本教程的目的，我们从带有一些默认模板的基本网格开始。它还实现了过滤、排序和固定等功能，这些功能非常容易在网格顶部启用和使用。

为了将其变成更高级和定制的网格，我们还将使用：

• 用于显示的一列模板。

• 另一个处理当您编辑特定单元格时它应该是什么样子。

什么是列模板？

网格列模板用于在特定列内创建自定义布局和内容。在构建应用程序时，无论是 Web 应用程序还是具有基于 Web UI 的移动应用程序，使用网格列模板都可以带来多种好处：

• 实现响应能力并定义不同屏幕尺寸上的列行为。

• 建立更加一致、更易于维护的网格结构，具有连贯的视觉体验。

• 通过与任何屏幕分辨率相匹配的可调节列宽，可以更有效地利用布局内的空间。

• 在安排复杂的 UI 元素和对齐不同项目时，提供对应用程序视觉外观的灵活性和精确控制。

• 通过为网格区域设置更清晰的名称来提高代码的可读性和可维护性。

• 通过使您能够创建模块化布局来提高可重用性。

• 支持多列布局，这对于内容较多的 UI 或仪表板非常有用。

您还可以使用 App Builder 中的新列模板功能做什么？

• URL 数据字段现在可以与自定义图像组件关联。

• 显示评级组件并给出某些数值的视觉线索。

• 提供更直观的方式来指示特定列包含电话号码。

App Builder 网格列模板入门

将图像放入网格中

最快的方法是回到App Builder中的编辑器（在网格中编辑时间体验），对于每个网格，所有子元素都是列，您可以选择您的头像URL，它会显示网格列属性。另一个选项是从“显示格式”中选择“图像”，它会自动将其替换为可以进一步自定义的图像，以具有带有名字和姓氏的头像。

在我们的例子中，让我们显示头像、名字和姓氏。那么，我们需要的只是“显示”，因此我们必须在应用程序生成器中启用它。左上角有放置内容的提示。您可以继续从工具箱中拖放 Avatar 组件并将其添加到位。

然后，继续编辑单元格显示模板，添加两个文本元素，并设置一定的大小。然后将第一个文本元素绑定到“名字”，将第二个文本元素绑定到“姓氏”，对于头像，您可以从图标中进行选择并选择图像，这会公开绑定选项。在绑定选项中，这个特定的数据源具有我们只需插入的必要头像 URL。

控制布局

默认情况下，模板不提供任何布局方向。因此，为了控制布局，您需要在其中添加自己的布局，然后开始删除组件或事后执行。 

然后，我们得到默认的Flex容器，您可以在其中指定对齐方式、间隙属性、边距等。

绑定及芯片元件

我们现在要做的另一件快速的事情是将芯片组件放入电话号码中。继续选择您的设计师，单击地址电话并为其命名，然后更改列内的单元格显示模板。它将变为空白。然后放下一个芯片组件并通过选择一个项目来添加电话功能。芯片的实际内容（默认绑定时会出现），您可以进一步将其指定为“电话号码”。

更改标题区域以显示选择框

这个过程几乎是一样的。您选择一个标题，在单元格顶部显示的显示和编辑之间切换。编辑时，在其中放置一个干净的选择框。之后，您可以选择您的选项。最后，您的网格中有一个显示模板和一个编辑模板，以及一个漂亮干净的选择框。

现在一切都已准备就绪。单击“预览”查看您所构建的内容。

包起来…

在这个快速入门教程中，我们向您展示了如何使用显示模板来构建自定义布局以及如何修改编辑模板以创建不同的组件。这样，您就可以为所有网格创建自定义布局，并以相同的性能体验网格，但现在可以享受模板的好处。

您还可以观看演示所有步骤的网络研讨会。