设置卡片或对话框的结构

本页介绍了如何设置卡片或对话框中 widget 的格式和结构 消息。


使用卡片构建器设计和预览聊天应用的 JSON 卡片消息:

打开卡片制作工具

前提条件

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

在列中显示卡片和对话框

通过 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 顶部。

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

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

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

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

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

这是一张卡片,由 divider widget 组成, 微件:

显示包含多项内容的网格

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

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

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

定义文字在网格中的显示位置

通过 gridItemLayout 字段 可让您在每个 gridItem 中定义文本显示在上方还是下方 网格中的列表项。如果未定义 gridItemLayout,文本默认为 显示在网格中相应项的下方

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

为界面元素添加边框

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

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

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

问题排查

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

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