为 Google Chat 应用构建卡片

本页介绍如何构建 卡片。卡片是用户 Google Chat 应用可使用这些界面展示和收集信息 Chat 用户提供的信息。聊天应用可以构建 并在以下界面中显示卡片：

  • 信息 其中包含一张或多张卡片
  • 首页、 该卡片会直接显示在首页标签页中 消息。
  • 对话框：即打开的卡片 新窗口中。

在本页中，您将了解卡片的以下组成部分：

  • 标题，通常包含卡片或卡片的标题 部分。
  • 部分，构成正文 包括微件和其他互动元素。在卡片中 部分，您可以向卡片添加更多结构，包括列和网格。
  • 固定页脚：显示在 对话框显示永久性界面元素，如按钮。

前提条件

一款已启用互动功能的 Google Chat 应用。要创建 交互式 Chat 应用，请完成以下快速入门之一 针对您要使用的应用架构：

使用卡片构建器设计和预览聊天应用的消息功能和界面：

打开卡片制作工具

添加标头

CardHeader widget 表示卡片的标题。标头可以包含 卡片的标题、副标题和头像图片。

以下是 CardHeader 的示例：

添加一个或多个卡片部分

CardSection widget 是卡片内的一个高级容器。您使用卡 部分，将卡片内的微件分组。对于每个卡片部分，您都可以添加 以及一个或多个微件

以下是包含两个 textParagraph 的 CardSection 示例 微件：

在微件之间添加水平分隔线

通过 divider widget 显示一条跨越卡片宽度的水平线 在垂直堆叠微件之间移动。线条是可视的分隔线 用户可以区分不同的微件，使卡片更易于扫描 和理解。

这是一张卡片，由 divider widget 组成， 微件：

添加列

通过 columns widget 卡片中最多可以显示 2 列。您可以添加 微件；这些小部件会按照。 如需包含 2 个以上的列，或使用行，请使用 grid widget。

每列的高度由较高的列决定。例如，如果 第一列高于第二列，但这两列都有 第一列的高度。因为每一列可以包含不同的数字 微件，您无法定义行或在列之间对齐微件。

以下示例显示了一张包含 columns widget 的卡片，该 widget 具有以下特征： 2 列文本。仅查看列布局并收起代码 请点击 收起。 当空间有限（如下例所示）时， 第二列位于第一列下方。

定义列宽

列将并排显示。您可以自定义每列的宽度 使用 horizontalSizeStyle 字段。 如果用户的屏幕宽度过窄，则第二列会换行到 名字：

  • 在 Web 上，如果屏幕宽度小于或等于 480 像素。
  • 在 iOS 设备上，如果屏幕宽度小于 或 ，则第二列会换行。 等于 300 分。
  • 在 Android 设备上，如果屏幕宽度小于 或等于 320 dp。

以下示例显示了一张包含 columns widget 的卡片，该 widget 具有以下特征： 2 列文本，每列中包含 4 个项目。列中的每一项都包含 应用 horizontalSizeStyle，以控制文本的空间大小 填充每一列：

  • 第一个文本段落使用 FILL_MINIMUM_SPACE，填充比例不超过 30% 卡片宽度
  • 第二个文本段落使用 FILL_AVAILABLE_SPACE 来填充可用的 在本例中，该图标填充了 宽度。
  • 第三个文本段落未定义 horizontalSizeStyle，因此是默认值 以填充卡片的可用空间。
  • 第四个文本段落使用 FILL_MINIMUM_SPACE，填充不超过 30% 卡片宽度

定义列的水平对齐方式

您可以通过以下方法将微件水平对齐到列的左侧、右侧或中心： 定义 horizontalAligment 字段。 如果未定义 horizontalAlignment 字段，widget 将与 左边。

以下示例将一列内的文本向左水平对齐：

以下示例将某列中的文本居中对齐：

以下示例将一列内的文本向右水平对齐：

定义列的垂直对齐方式

您可以通过以下方式将微件与列的顶部、底部或中心垂直对齐： 定义 verticalAlignment 字段。 如果 verticalAlignment 字段未定义，则将对齐列中的 widget 顶部。

以下示例将列中的文本与顶部垂直对齐：

以下示例将某列中的文本垂直对齐：

以下示例将底部一列内的文本垂直对齐：

添加网格以显示一系列项

通过 grid widget 用于显示包含一系列项的网格。网格支持任意数量的 列和项。行数取决于项数除以列数。 一个包含 10 个项、2 列的网格有 5 行。包含 11 个项和 2 项的网格 列共有 6 行。

该微件支持提供建议，以帮助用户输入统一的数据； 变化操作 Actions 当文本输入字段发生变化（例如用户添加或 删除文本。

以下示例是一个包含一项内容的 2 列网格：

若要定义包含图片的文字在网格中的显示位置，您可以指定 gridItemLayout 字段。 通过此字段，您可以定义文字是显示在上方还是下方 网格中的列表项。如果未定义 gridItemLayout，则文本默认为 会显示在网格中相应项的下方。

以下示例是一个包含文本和图片的三列网格 每个网格中。第一个网格定义了要在图片上方显示的文本，第二个网格定义了要在图片上方显示的文本 grid 定义了要在图片下方显示的文本，而第三个网格则未定义 文本的位置。

为网格或列添加边框

对于显示在 column 或 grid widget 中的项，您可以添加边框 定义一个 borderType 个字段 和 borderStyle 字段。 如果未定义 borderStyle 字段，则默认不显示边框。您可以 定义要应用于 widget 中所有项或应用样式的 borderType 。

以下示例是一个 2 列的网格，每个网格中有一张图片，其中 边框类型、样式和颜色已定义为适用于 网格。

以下示例是一个 3 列的网格，每个网格中有一张图片， 分别定义的边框样式和类型。第一个 图片的边框定义为 STROKE。第二张图片的边框定义为 NO_BORDER。第三张图片没有定义边框。

CardFixedFooter 微件表示由 Chat 应用。 页脚可以包含主按钮和辅助按钮。

CardFixedFooter widget 仅适用于 对话框。

下面是一个包含两个按钮的 CardFixedFooter widget 示例：

问题排查

当 Google Chat 应用或 card 会返回错误， 聊天界面会显示一条内容为“出了点问题”的消息。 或“无法处理您的请求”。有时，Chat 界面 不会显示任何错误消息，但 Chat 应用或 卡片会产生意外结果；例如，卡片消息 。

虽然 Chat 界面中可能不会显示错误消息， 提供描述性错误消息和日志数据，以帮助您修正错误 启用 Chat 应用的错误日志记录时。如需观看方面的帮助， 请参阅 排查并修正 Google Chat 错误。