為 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 未定義,文字預設會顯示在格線中的項目下方。

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

為格線或欄加上框線

如要為 columngrid 小工具中顯示的項目新增邊框,請定義 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 錯誤」。