本頁說明如何建構資訊卡的元件和結構。資訊卡是 Google Chat 應用程式可用來向 Chat 使用者呈現及收集資訊的使用者介面。Chat 應用程式可以在下列介面中建立及顯示資訊卡：
本頁面將說明資訊卡的以下元件：
- 標題：通常包含資訊卡或資訊卡區段的標題。
- Sections：用於建立資訊卡的主要內容，包括小工具和其他互動式元素。在資訊卡版面配置中，您可以為資訊卡加入更多結構，包括欄和格線。
- 固定頁尾：會顯示在對話方塊底部，用於顯示持續存在的 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 列文字。如要只查看資料欄版面配置並收合程式碼範例，請按一下 「收合」。在空間受限的情況下，如以下範例所示，第二欄會在第一欄下方折行。
定義資料欄寬度
資料欄會並排顯示。您可以使用 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 欄位，為這些 UI 元素新增邊框。如果未定義 borderStyle 欄位，則預設為不顯示邊框。您可以定義 borderType，套用至小工具中的所有項目，或是套用樣式至小工具中的個別項目。
以下範例是 2 欄格狀檢視畫面，每個格狀檢視畫面中都有一張圖片，邊框類型、樣式和顏色已定義為套用至格狀檢視畫面中的所有項目。
以下範例是 3 欄格式，每個格式中都有圖片，邊框樣式和類型則是個別定義。第一個圖片的邊框定義為 STROKE。第二張圖片的邊框定義為 NO_BORDER。第三張圖片沒有定義邊框。
新增永久性頁尾
CardFixedFooter 小工具代表 Chat 應用程式傳送的對話方塊訊息底部。底部可包含主要按鈕和次要按鈕。
CardFixedFooter 小工具僅適用於對話方塊。
以下是含有兩個按鈕的 CardFixedFooter 小工具範例：
疑難排解
當 Google Chat 應用程式或資訊卡傳回錯誤時，Chat 介面會顯示「發生錯誤」的訊息。或「無法處理您的要求」。有時 Chat UI 不會顯示任何錯誤訊息，但 Chat 應用程式或資訊卡會產生意外結果，例如資訊卡訊息可能不會顯示。
雖然 Chat UI 可能不會顯示錯誤訊息，但當您開啟 Chat 應用程式的錯誤記錄功能時，系統會提供說明性錯誤訊息和記錄資料，協助您修正錯誤。如需查看、偵錯及修正錯誤的相關說明，請參閱「排解及修正 Google Chat 錯誤」一文。