Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

向卡片中添加文字和图片

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

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

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

打开卡片构建器

前提条件

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

添加图片或图标

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

添加图片

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 微件组成的卡片。其中显示了 Google Chat 开发者文档着陆页图片。当用户点击该图片时，系统会在新标签页中打开 Google Chat 开发者文档。

添加图片组件

Image widget 是一个样式有限的图片。ImageComponent 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
	EMAIL		EVENT_SEAT
	FLIGHT_ARRIVAL		FLIGHT_DEPARTURE
	HOTEL		HOTEL_ROOM_TYPE
	邀请		MAP_PIN
	会员		MULTIPLE_PEOPLE
	PERSON		PHONE
	RESTAURANT_ICON		SHOPPING_CART
	STAR		STORE
	TICKET		训练
	VIDEO_CAMERA		VIDEO_PLAY

为卡片添加文字

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

添加一段带格式的文本

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

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

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

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

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

添加可收起的文本段落

可折叠文本段落让用户可以根据需要显示更多信息。此 widget 非常适合呈现冗长内容或额外详情，用户选中后即可探索这些内容，从而打造动态、互动的用户体验。

显示带有装饰元素的文字

DecoratedText 微件可显示文本，并提供可选的布局和功能。例如：

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

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

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

以下卡片由一个 DecoratedText widget 组成，用于显示详细联系信息，例如电子邮件地址、在线状态、电话号码和网站：

问题排查

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

虽然 Chat 界面中可能不会显示出错提示，但如果为 Chat 应用启用了日志记录，则可以使用描述性出错提示和日志数据来帮助您修复错误。如需查看、调试和修复错误方面的帮助，请参阅排查和修复 Google Chat 错误。

向卡片中添加文字和图片 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。