設定資訊卡或對話方塊的結構

本頁說明如何在資訊卡或對話方塊中設定小工具的格式和結構 撰寫新的電子郵件訊息

您可以使用 Card Builder 設計及預覽即時通訊應用程式的 JSON 資訊卡訊息：

開啟資訊卡建立工具

必要條件

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

在資料欄中顯示資訊卡和對話方塊

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 欄位未定義，資料欄中的小工具就會對齊 。

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

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

以下範例會在某個資料欄內垂直對齊文字：

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

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

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

顯示內含一組項目的格狀檢視畫面

grid小工具 會顯示一個包含項目集合的格狀檢視。格線可支援任意數量的 資料欄和項目列數是由項目除以資料欄。 如果格狀檢視包含 10 個項目，2 欄，則有 5 列。包含 11 個項目和 2 的格狀檢視畫面 共有 6 列

小工具支援建議功能，可協助使用者輸入統一的資料，以及 並在使用者變更時 Actions敬上 這個事件會在文字輸入欄位發生變更時執行，例如使用者新增或 正在刪除文字。

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

定義文字在格狀檢視畫面中顯示的位置

gridItemLayout 欄位 可讓您在每個 gridItem 內定義文字，不論文字是否顯示在上方或下方 檢視格狀檢視畫面如果未定義 gridItemLayout，文字會預設為 在格狀檢視畫面中的項目下方

以下範例是包含文字和圖片的 3 欄格線 。第一個格線定義顯示在圖片上方的文字，第二個格線 格線會定義顯示在圖片下方的文字，而第三個格線則未定義 文字的位置。

為 UI 元素加上邊框

您可以對 column 或 grid 小工具中顯示的項目加上框線 定義 borderType 欄位 和 borderStyle 欄位。 如未定義 borderStyle 欄位，則預設不顯示邊框。你可以 定義 borderType，套用至小工具中的所有項目或套用樣式 套用至小工具中的每個項目

以下範例是 2 欄的格線，其中圖片的格線中， 已定義框線類型、樣式和顏色，套用到 格線。

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

疑難排解

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

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