本頁說明如何建構資訊卡的元件和結構。資訊卡是使用者介面，Google Chat 擴充應用程式可透過資訊卡向 Chat 使用者呈現及收集資訊。Chat 擴充應用程式可在下列介面建構及顯示資訊卡：
本頁面將介紹資訊卡的下列元件：
- 標頭：通常包含資訊卡或資訊卡區段的標題。
- 區段：構成資訊卡的主體，包括小工具和其他互動元素。在資訊卡區段中，您可以為資訊卡新增更多結構，包括欄和格線。
- 固定頁尾：顯示在對話方塊底部，用於顯示永久 UI 元素，例如按鈕。
必要條件
Google Chat 應用程式，已設定為接收及回應使用者互動。如要建立互動式 Chat 應用程式，請根據您要使用的應用程式架構，完成下列其中一項快速入門導覽課程：
- 使用 Google Cloud Functions 的 HTTP 服務
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
使用資訊卡建構工具，設計及預覽 Chat 擴充應用程式的訊息和使用者介面：
開啟資訊卡製作工具新增標頭
CardHeader 小工具代表資訊卡的標頭。標頭可包含資訊卡的標題、副標題和顯示圖片。
以下是 CardHeader 範例：
新增一或多個資訊卡區塊
CardSection 小工具是資訊卡中的高階容器。您可以使用資訊卡區段，將資訊卡中的小工具分組。每個資訊卡區塊都可以包含標頭和一或多個小工具。
以下是包含兩個 textParagraph 小工具的 CardSection 範例：
在小工具之間加入水平分隔線
divider 小工具會在垂直堆疊的小工具之間，顯示一條橫跨資訊卡寬度的水平線。這條線是視覺分隔線，可協助使用者區分不同的小工具，讓資訊卡更容易瀏覽和理解。
以下資訊卡包含 divider 小工具，以及其他類型的小工具：
新增欄
columns 小工具最多可在資訊卡中顯示 2 欄。您可以在每個資料欄中新增小工具，小工具會按照指定的順序顯示。如要加入 2 個以上的資料欄，或使用資料列，請使用 grid 小工具。
每個資料欄的高度取決於較高的資料欄。舉例來說，如果第一欄高於第二欄，則兩欄的高度都會是第一欄的高度。由於每個資料欄可包含不同數量的小工具，因此您無法定義資料列，也無法對齊各欄之間的小工具。
以下範例顯示的資訊卡含有 columns 小工具，其中包含 2 欄文字。如要只查看欄版面配置並收合程式碼範例，請按一下 「Collapse」(收合)。如果空間有限 (如下例所示)，第二欄會換行到第一欄下方。
定義資料欄寬度
資料欄會並排顯示。您可以使用 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% 以下。
定義資料欄的水平對齊方式
您可以定義 horizontalAlignment 欄位，將小工具水平對齊欄的左側、右側或中央。如果未定義 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 UI 可能不會顯示錯誤訊息，但只要開啟 Chat 擴充應用程式的錯誤記錄功能，就能查看描述性錯誤訊息和記錄資料，協助您修正錯誤。如需查看、偵錯及修正錯誤的相關協助，請參閱「排解及修正 Google Chat 錯誤」。