向卡片中添加文字和图片

本页介绍了如何向卡片添加文本和图片并设置其格式。

如需详细了解如何构建卡片，请参阅为 Google Chat 应用构建卡片。

使用卡片构建器为 Chat 应用设计消息和界面并预览：

打开卡片构建器

前提条件

已配置为接收和响应互动事件的 Google Chat 应用。如需创建交互式 Chat 应用，请根据要使用的应用架构完成以下任一快速入门 Codelab：

添加图片或图标

本部分介绍了如何向卡片添加图片、图片组件和图标等视觉元素。

添加图片

Image widget 显示托管在 HTTPS 网址上的 PNG 或 JPG 图片。 显示图片的宽度会占满显示卡片的整个宽度，而其高度会进行调整以保持图片的宽高比。Image widget 支持用户点击图片时发生的 onclick 操作。onclick 操作的示例包括：

  • 打开带有 OpenLink 的超链接，例如指向 Google Chat 开发者文档的超链接 https://developers.google.com/chat。
  • 运行可执行自定义函数（例如调用 API）的操作。

Image widget 具有以下限制：

  • 仅支持 PNG 和 JPG 格式的图片。
  • 主机网址必须为 HTTPS。
  • 为确保卡片效果良好，建议图片大小上限为 2MB。

以下是包含 Image widget 的卡片。它显示了 Google Chat 开发者文档着陆页图片。当用户点击该图片时，Google Chat 开发者文档会在新标签页中打开。

添加图片组件

Image widget 是一种样式有限的图片。借助 imageCompent widget，您可以对图片应用 cropStyle 和 borderStyle。

以下示例展示了网格中的两张图片，其中一张图片经过裁剪：

您可以通过应用 cropStyle 来调整图片组件的形状。您可以将多种形状应用于图片：

  • 使用 SQUARE 应用方形裁剪。
  • 使用 CIRCLE 应用圆形裁剪。
  • 使用 RECTANGLE_CUSTOM 应用具有自定义宽高比的矩形裁剪。例如，您可以使用 RECTANGLE_4_3 应用宽高比为 4:3 的矩形剪裁。

以下示例展示了一个网格中的五张图片，每张图片都应用了不同的 cropStyle：

添加图标

Icon widget 表示内置图标或自定义图标。您可以向卡片添加图标，以执行以下任一操作：

  • 显示独立图标。
  • 在相关文本前面显示图标，作为 DecoratedText widget 的一部分。
  • 将图标显示为互动按钮，作为 ButtonList widget 的一部分。

以下是一个包含内置图标的 Icon 组件的卡片：

下表列出了可用于卡片消息的内置图标：

AIRPLANE BOOKMARK
BUS CAR
时钟 CONFIRMATION_NUMBER_ICON
说明 DOLLAR
电子邮件 EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
邀请 MAP_PIN
会员 MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

向卡片添加文字

本部分介绍了如何在卡片中添加和设置文本格式。

添加一段格式化文本

TextParagraph widget 用于显示一段文本，并可选择性地添加 HTML 格式。设置这些 widget 的文本内容时，只需添加相应的 HTML 标记即可。 如需详细了解支持哪些 HTML 代码，请参阅设置卡片中显示的文本的格式。

例如，段落文本可使用以下格式：

  • 使用 HTML <b>、<u>、<i> 标记显示粗体、下划线或斜体文本。
  • 使用 HTML <a href="https://www.google.com">hyperlinks</a> 链接到网站。
  • 使用 HTML <font color="#ea9999">font tags</font> 添加一些颜色。

每个 TextParagraph widget 都会呈现为新段落，可以将其视为类似于 HTML <p> 标记。

以下卡片包含两个 TextParagraph widget，用于显示两个具有简单 HTML 格式的段落：

添加可收起的文本段落

用户可以根据需要展开折叠式文本段落，查看更多信息。 此 widget 非常适合呈现长篇内容或附加详情，用户可以在选择后探索这些内容，从而打造动态且互动的用户体验。

显示带有装饰元素的文字

DecoratedText widget 用于显示具有可选布局和功能的文本。例如：

  • 使用 startIcon 在文字前面显示 icon。
  • 使用 topLabel 在文字前显示标题。
  • 添加带有 button 的可点击按钮或带有 switchControl 的可切换开关。

当您需要以易于理解的互动方式呈现信息时，请使用 DecoratedText widget。此 widget 非常适合用于联系人卡片、订单状态更新和工单通知等使用情形。

DecoratedText widget 支持简单的文本 HTML 格式。设置这些 widget 的文本内容时，只需添加相应的 HTML 标记即可。如需详细了解支持哪些 HTML 标记，请参阅卡片文本格式。

以下卡片包含一个 DecoratedText widget，用于显示电子邮件地址、在线状态、电话号码和网站等联系信息：

问题排查

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

虽然聊天界面中可能不会显示错误消息，但如果为聊天应用启用错误日志记录，系统会提供描述性错误消息和日志数据，帮助您修复错误。如需有关查看、调试和修复错误的帮助，请参阅排查和修复 Google Chat 错误。