為 Google Chat 應用程式建構資訊卡

本頁說明如何建構資訊卡的元件和結構。資訊卡是使用者介面，Google Chat 應用程式可用於向 Chat 使用者呈現資訊及收集資訊。Chat 應用程式可以在下列介面中建立及顯示資訊卡：

  • 訊息 含有一或多張資訊卡。
  • 首頁：在與 Chat 應用程式的即時訊息中，從「首頁」分頁顯示的資訊卡。
  • 對話方塊：從訊息和首頁在新視窗中開啟的資訊卡。

本頁面將說明資訊卡的下列元件：

  • 標題：通常包含資訊卡或資訊卡部分的標題。
  • 區段：構成資訊卡主體，包括小工具和其他互動式元素。在資訊卡區段中，您可以為資訊卡新增更多結構，包括欄和格線。
  • 固定頁尾：顯示在對話方塊底部，用於顯示持續顯示的 UI 元素，例如按鈕。

必要條件

已設定為接收及回應互動事件的 Google Chat 應用程式。如要建立互動式 Chat 應用程式，請根據要使用的應用程式架構，完成下列其中一個快速入門導覽：

使用資訊卡建構工具設計及預覽 Chat 應用程式的訊息和使用者介面：

開啟「資訊卡建立工具」

新增標頭

CardHeader 小工具代表資訊卡的標頭。標題可以包含資訊卡的標題、副標題和個人資料相片。

以下是 CardHeader 的範例：

新增一或多個卡片區塊

CardSection 小工具是資訊卡中的頂層容器，您可以使用卡片區隔，將小工具分組到卡片中。每個資訊卡區段都可以包含標題和一或多個小工具。

以下範例的 CardSection 包含兩個 textParagraph 小工具：

在小工具之間新增水平分隔線

divider 小工具會顯示一條橫線，位於直向堆疊的小工具之間，並跨越卡片寬度。這條線是視覺分隔線，可協助使用者區分不同的小工具，方便掃描及瞭解資訊卡內容。

以下資訊卡包含 divider 小工具，以及其他類型的小工具：

新增欄

columns 小工具最多可在資訊卡中顯示 2 欄。您可以為每個資料欄新增小工具，小工具會按照指定順序顯示。如要加入超過 2 個資料欄或使用資料列，請使用 grid 小工具。

每個資料欄的高度取決於較高的資料欄。舉例來說，如果第一欄高於第二欄，兩欄的高度都會與第一欄相同。由於每個資料欄可包含不同數量的小工具，因此您無法定義資料列，也無法對齊資料欄之間的小工具。

以下範例顯示含有 columns 小工具的資訊卡，其中包含 2 欄文字。如要只查看欄版面配置並收合程式碼範例，請按一下「收合」圖示 。如果空間有限，例如在下列範例中，第二欄會換行到第一欄下方。

定義欄寬

資料欄會並排顯示。您可以使用 horizontalSizeStyle 欄位，自訂每個資料欄的寬度。如果使用者螢幕寬度過窄，第二欄會換行至第一欄下方：

  • 在網頁上，如果螢幕寬度小於或等於 480 像素，第二欄就會換行。
  • 在 iOS 裝置上，如果螢幕寬度小於或等於 300 pt，第二欄就會換行。
  • 在 Android 裝置上，如果螢幕寬度小於或等於 320 dp，第二欄就會換行。

以下範例顯示含有 columns 小工具的資訊卡，其中包含 2 欄文字，每欄有 4 個項目。資料欄中的每個項目都套用了 horizontalSizeStyle，可操控文字填滿每個資料欄的空間大小：

  • 第一個文字段落會使用 FILL_MINIMUM_SPACE 填滿卡片寬度，但不得超過 30%。
  • 第二段文字使用 FILL_AVAILABLE_SPACE 填滿卡片寬度內的可用空間。在本例中，圖片會填滿卡片寬度的 70%。
  • 第三段文字未定義 horizontalSizeStyle，因此預設會填滿資訊卡的可用空間。
  • 第四個文字段落使用 FILL_MINIMUM_SPACE 填滿卡片寬度，但不得超過 30%。

定義資料欄的水平對齊方式

您可以定義 horizontalAligment 欄位，將小工具水平對齊資料欄的左側、右側或中央。如果未定義 horizontalAlignment 欄位，小工具會在資料欄中靠左對齊。

以下範例會將資料欄中的文字靠左水平對齊：

以下範例會將資料欄中的文字水平對齊至中央：

以下範例會將資料欄中的文字靠右水平對齊：

定義資料欄的垂直對齊方式

您可以定義 verticalAlignment 欄位，將小工具垂直對齊欄的頂端、底部或中央。如果 verticalAlignment 欄位未定義，資料欄中的小工具會對齊頂端。

以下範例會將資料欄中的文字垂直對齊頂端：

以下範例會將資料欄中的文字垂直置中對齊：

以下範例會將資料欄中的文字垂直對齊底部：

新增格線來顯示項目集合

grid 小工具會顯示包含一系列項目的格線。格線支援任意數量的欄和項目。列數取決於項目數除以欄數。 如果格線有 10 個項目和 2 欄，就會有 5 列。如果格線有 11 個項目和 2 個資料欄，則會有 6 個資料列。

這個小工具支援建議功能，可協助使用者輸入一致的資料，以及變更時的動作，也就是在文字輸入欄位發生變更時 (例如使用者新增或刪除文字) 執行的 Actions。

以下範例是含有單一項目的 2 欄格線：

如要定義文字在格線中與圖片的顯示位置，可以指定 gridItemLayout 欄位。這個欄位可讓您定義文字在格狀檢視畫面中顯示於項目上方或下方。如果 gridItemLayout 未定義，文字預設會顯示在格線中的項目下方。

以下範例是三欄格線，每個格線中都有文字和圖片。第一個格線定義圖片上方顯示的文字，第二個格線定義圖片下方顯示的文字，第三個格線則不會定義文字位置。

為格線或欄加上框線

如要為 column 或 grid 小工具中顯示的項目新增邊框，請定義 borderType 欄位和 borderStyle 欄位。如未定義 borderStyle 欄位，系統預設不會顯示邊框。您可以定義 borderType，套用至小工具中的所有項目，也可以將樣式套用至小工具中的每個項目。

以下範例是 2 欄格線，每個格線中都有一張圖片，且已定義邊框類型、樣式和顏色，並套用至格線中的所有項目。

以下範例是 3 欄格線，每個格線都有一張圖片，且個別定義了邊框樣式和類型。第一張圖片的邊框定義為 STROKE。第二張圖片的邊框定義為 NO_BORDER。第三張圖片未定義邊框。

新增輪轉介面

Carousel 小工具會顯示 CarouselCard 物件的集合，這些物件可在畫面上捲動。你可以在每個CarouselCard中新增多個小工具。

CardFixedFooter 小工具代表 Chat 應用程式傳送的對話方塊訊息頁尾。頁尾可以包含主要按鈕和次要按鈕。

CardFixedFooter 小工具僅適用於對話方塊。

以下是含有兩個按鈕的 CardFixedFooter 小工具範例：

疑難排解

如果 Google Chat 應用程式或資訊卡傳回錯誤，Chat 介面會顯示「發生錯誤」訊息。或「無法處理您的要求」。有時 Chat UI 不會顯示任何錯誤訊息，但 Chat 應用程式或資訊卡會產生非預期結果，例如資訊卡訊息可能不會顯示。

即使 Chat 使用者介面未顯示錯誤訊息，只要開啟 Chat 應用程式的錯誤記錄功能，系統就會提供說明性錯誤訊息和記錄資料，協助您修正錯誤。如需查看、偵錯及修正錯誤的相關協助，請參閱「排解及修正 Google Chat 錯誤」。