本页介绍了如何构建卡片的组件和结构。卡片是 Google Chat 应用可用于向 Chat 用户呈现信息和从 Chat 用户处收集信息的用户界面。聊天应用可以在以下界面中构建和显示卡片：
在此页面中，您将了解卡片的以下组成部分：
- 标题，通常包含卡片或卡片部分的标题。
- 部分，构成卡片的正文，包括 widget 和其他互动元素。在卡片部分中，您可以为卡片添加更多结构，包括列和网格。
- 固定页脚，显示在对话框底部，用于显示持久性界面元素（例如按钮）。
前提条件
已配置为接收和响应互动事件的 Google Chat 应用。如需创建交互式 Chat 应用，请根据要使用的应用架构完成以下任一快速入门 Codelab：
- 使用 Google Cloud Functions 的 HTTP 服务
- Google Apps 脚本
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
使用卡片构建器为 Chat 应用设计消息和界面并预览：
打开卡片构建器添加标头
CardHeader widget 表示卡片的标题。标题可以包含卡片的标题、副标题和头像图片。
以下是 CardHeader 的示例：
添加一个或多个卡片部分
CardSection widget 是卡片中的高级容器。您可以使用卡片部分对卡片中的 widget 进行分组。对于每个卡片部分，您可以添加一个标题和一个或多个 widget。
以下是一个包含两个 textParagraph widget 的 CardSection 示例：
在 widget 之间添加水平分隔线
divider widget 会显示一条横线，该横线位于垂直堆叠的 widget 之间，跨越卡片的宽度。此线条是一种视觉分隔线，可帮助用户区分不同的 widget，从而更轻松地浏览和理解卡片。
以下卡片包含 divider widget 以及其他类型的 widget：
添加列
columns widget 最多可在卡片中显示 2 列。您可以向每个列添加 widget；widget 会按指定的顺序显示。
如需添加 2 列以上的列，或使用行，请使用 grid widget。
每列的高度由较高的列决定。例如，如果第一列比第二列高，则两列的高度都与第一列相同。由于每个列可以包含不同数量的 widget，因此您无法定义行或在列之间对齐 widget。
以下示例显示了一张卡片，其中包含一个 columns widget，该 widget 具有 2 列文本。如需仅查看列布局并收起代码示例，请点击 收起。
当空间受限时（如下例所示），第二列会换行到第一列下方。
定义列宽
列会并排显示。您可以使用 horizontalSizeStyle 字段自定义每列的宽度。如果用户的屏幕宽度过窄，第二列会换行到第一列下方：
- 在网页上，如果屏幕宽度小于或等于 480 像素，则第二列会换行。
- 在 iOS 设备上，如果屏幕宽度小于或等于 300 pt，则第二列会换行。
- 在 Android 设备上，如果屏幕宽度小于或等于 320 dp，则第二列会换行。
以下示例显示了一张卡片，其中包含一个 columns widget，该 widget 具有 2 列文本，每列包含 4 个项目。列中的每个项目都应用了 horizontalSizeStyle，以控制文本填充每列的空间大小：
- 第一个文本段落使用
FILL_MINIMUM_SPACE填充不超过卡片宽度 30% 的空间。 - 第二个文本段落使用
FILL_AVAILABLE_SPACE填充卡片宽度中的可用空间。在此示例中，它会填充卡片宽度的 70%。 - 第三个文本段落未定义
horizontalSizeStyle，因此默认填充卡片空间的可用空间。 - 第四个文本段落使用
FILL_MINIMUM_SPACE填充不超过卡片宽度的 30%。
定义列的水平对齐方式
您可以通过定义 horizontalAligment 字段，将 widget 水平对齐到列的左侧、右侧或中间。
如果未定义 horizontalAlignment 字段，则 widget 在列中左对齐。
以下示例将列中的文本水平靠左对齐：
以下示例将列中的文本水平居中对齐：
以下示例将列中的文本水平靠右对齐：
定义列的垂直对齐方式
您可以通过定义 verticalAlignment 字段，将 widget 垂直对齐到列的顶部、底部或中心。
如果未定义 verticalAlignment 字段，则列中的 widget 会与顶部对齐。
以下示例将列中的文字垂直对齐到顶部：
以下示例将列中的文字垂直居中对齐：
以下示例将列中的文本垂直对齐到底部：
添加网格以显示内容集合
grid widget 会显示包含一系列项目的网格。网格支持任意数量的列和项。行数由商品数除以列数确定。
一个包含 10 个项和 2 列的网格有 5 行。一个包含 11 个项和 2 列的网格有 6 行。
该 widget 支持建议（可帮助用户输入统一的数据）和 on-change 操作（即在文本输入字段中发生更改时运行的 Actions，例如用户添加或删除文本）。
以下示例是一个包含单个商品的 2 列网格：
如需定义文字在网格中与图片一起显示的位置，您可以指定 gridItemLayout 字段。您可以使用此字段定义文字是显示在网格中的商品上方还是下方。如果 gridItemLayout 未定义，则文本默认显示在网格中相应项的下方。
以下示例是一个三列网格，每个网格中都包含文字和图片。第一个网格定义了显示在图片上方的文字，第二个网格定义了显示在图片下方的文字，而第三个网格未定义文字的位置。
为网格或列添加边框
对于显示在 column 或 grid widget 中的商品，您可以通过定义 borderType 字段和 borderStyle 字段来为这些界面元素添加边框。如果未定义 borderStyle 字段，则默认不显示边框。您可以定义一个 borderType 以应用于 widget 中的所有项，也可以将样式应用于 widget 中的每个单独项。
以下示例是一个双列网格，每个网格中都有一张图片，并且已定义边框类型、样式和颜色，以应用于网格中的所有商品。
以下示例是一个 3 列网格，每个网格中都包含一张图片，并且单独定义了边框样式和类型。第一张图片的边框定义为 STROKE。第二个图片的边框定义为 NO_BORDER。第三张图片未定义边框。
添加轮播界面
Carousel widget 会显示一个 CarouselCard 对象集合，这些对象可以在屏幕上滚动显示或滚动隐藏。您可以向每个 CarouselCard 添加多个 widget。
添加持久性页脚
CardFixedFooter widget 表示由 Chat 应用发送的对话框消息的页脚。页脚可以包含一个主按钮和一个次要按钮。
CardFixedFooter widget 仅适用于对话框。
以下是包含两个按钮的 CardFixedFooter widget 的示例：
问题排查
当 Google Chat 应用或卡片返回错误时，Chat 界面会显示一条消息，提示“出了点问题”。 或“无法处理您的请求”。有时，Chat 界面不会显示任何错误消息，但 Chat 应用或卡片会产生意外结果；例如，卡片消息可能不会显示。
虽然聊天界面中可能不会显示错误消息，但如果为聊天应用启用错误日志记录，系统会提供描述性错误消息和日志数据，帮助您修复错误。如需有关查看、调试和修复错误的帮助，请参阅排查和修复 Google Chat 错误。