本頁面由 Cloud Translation API 翻譯而成。

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

本頁說明如何建立資訊卡。資訊卡是使用者 Google Chat 應用程式可用來呈現及收集資料的介面透過 Chat 使用者取得的資訊。即時通訊應用程式可以並在以下介面中顯示資訊卡：

訊息包含一或多張資訊卡
首頁、是直接從「首頁」分頁顯示的資訊卡收發訊息。
對話方塊，也就是開啟的資訊卡開啟新分頁。

本頁面將說明資訊卡的下列組成部分：

標頭，通常包含資訊卡或資訊卡的標題專區。
構成主要內文的區段包括小工具和其他互動式元素資訊卡您也可以在資訊卡中加入更多結構，包括欄和格線。
固定頁尾，顯示在網頁底部對話方塊，用來顯示永久性 UI 元素，例如按鈕。

必要條件

已啟用互動功能的 Google Chat 應用程式。如要建立互動式 Chat 應用程式，請完成下列其中一個快速入門導覽課程在要使用的應用程式架構中：

使用 Card Builder 設計及預覽即時通訊應用程式的訊息和使用者介面：

開啟資訊卡建立工具

新增標頭

CardHeader 小工具資訊卡的標頭標題可以包含資訊卡的標題、副標題和顯示圖片。

以下是 CardHeader 的範例：

新增一或多個資訊卡專區

CardSection 小工具是資訊卡中的概略容器您使用的是卡片即可將卡片內的小工具分組。在每個資訊卡部分，您可以加入標頭和一或多個小工具

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

在小工具之間加入水平分隔線

divider小工具會顯示橫跨資訊卡寬度的水平線彼此垂直堆疊的小工具之間來回切換這條線是視覺分隔線使用者可以區分不同的小工具，讓資訊卡更易於掃描並瞭解

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

新增欄

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

每個資料欄的高度取決於較高資料欄。舉例來說第一欄的高度大於第二欄，兩欄都有第一個欄位的高度由於每個資料欄內可包含的您無法定義列，也無法對齊各欄之間的小工具。

以下範例顯示包含 columns 小工具的資訊卡 2 欄文字。僅查看欄版面配置及收合程式碼請在樣本中按一下「收合」。當空間受限時，如以下範例所示第二欄則會包含在第一欄下方。

定義欄寬

這兩欄會並排顯示。您可以自訂每個資料欄的寬度方法是使用 horizontalSizeStyle 欄位。如果使用者的螢幕寬度太窄，第二欄則會換行到名字：

在網頁上，第二欄會在螢幕寬度小於或等於 480 像素。
在 iOS 裝置上，如果螢幕寬度小於或等於 300 點
在 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。第三張圖片未定義框線。

新增永久性頁尾

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

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

以下為包含兩個按鈕的 CardFixedFooter 小工具範例：

疑難排解

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

雖然 Chat UI 中可能不會顯示錯誤訊息，提供描述性錯誤訊息和記錄資料，協助您修正錯誤。如需觀看說明，偵錯及修正錯誤，請參閱疑難排解並修正 Google Chat 錯誤。