На этой странице описывается, как построить компоненты и структуру карты . Карты — это пользовательские интерфейсы, которые приложения Google Chat могут использовать для представления и сбора информации от пользователей Chat. Приложения чата могут создавать и отображать карточки в следующих интерфейсах:
- Сообщения , содержащие одну или несколько карточек.
- Домашние страницы — карточка, которая появляется на вкладке «Главная» в личных сообщениях в приложении Chat.
- Диалоги — карточки, открывающиеся в новом окне из сообщений и домашних страниц.
На этой странице вы узнаете о следующих компонентах карты:
- Заголовки , которые обычно содержат заголовок карточки или раздела карточки.
- Разделы , составляющие основную часть карточки, включая виджеты и другие интерактивные элементы. В разделе карточки вы можете добавить к карточке дополнительную структуру, включая столбцы и сетки.
- Исправлены нижние колонтитулы , которые появляются в нижней части диалоговых окон для отображения постоянных элементов пользовательского интерфейса, таких как кнопки.
Предварительные условия
Приложение Google Chat с интерактивными функциями. Чтобы создать интерактивное приложение чата, выполните одно из следующих кратких руководств в зависимости от архитектуры приложения , которую вы хотите использовать:
- HTTP-сервис с облачными функциями Google
- Скрипт Google Apps
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Используйте конструктор карточек для разработки и предварительного просмотра сообщений и пользовательских интерфейсов для приложений чата:
Откройте конструктор карточекДобавить заголовок
Виджет CardHeader представляет собой заголовок карты. Заголовки могут включать заголовок, подзаголовок и изображение аватара вашей карточки.
Ниже приведен пример CardHeader :
Добавьте один или несколько разделов карты.
Виджет CardSection — это высокоуровневый контейнер внутри карточки. Разделы карты используются для группировки виджетов внутри карты. Для каждого раздела карточки вы можете включить заголовок и один или несколько виджетов.
Ниже приведен пример CardSection , который содержит два виджета textParagraph :
Добавьте горизонтальный разделитель между виджетами
Виджет- divider отображает горизонтальную линию, охватывающую ширину карточки между вертикально расположенными виджетами. Линия представляет собой визуальный разделитель, который помогает пользователям отличать один виджет от другого, упрощая сканирование и понимание карточек.
Ниже представлена карточка, состоящая из виджета- divider между другими типами виджетов:
Добавить столбцы
Виджет columns отображает до двух столбцов на карточке. Вы можете добавлять виджеты в каждый столбец; виджеты отображаются в том порядке, в котором они указаны. Чтобы включить более двух столбцов или использовать строки, используйте виджет grid .
Высота каждого столбца определяется более высоким столбцом. Например, если первый столбец выше второго, оба столбца будут иметь высоту первого столбца. Поскольку каждый столбец может содержать разное количество виджетов, вы не можете определять строки или выравнивать виджеты между столбцами.
В следующем примере отображается карточка с виджетом columns , содержащим два столбца текста. Чтобы просмотреть только макет столбцов и свернуть пример кода, нажмите 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 % ширины карточки.
Определение горизонтального выравнивания колонны
Вы можете выровнять виджеты по горизонтали слева, справа или по центру столбца, определив поле horizontalAligment . Если поле horizontalAlignment не определено, виджеты выравниваются по левому краю столбца.
В следующем примере текст внутри столбца выравнивается по левому краю:
В следующем примере текст внутри столбца выравнивается по центру:
В следующем примере текст внутри столбца выравнивается по горизонтали вправо:
Определение вертикального выравнивания столбца
Вы можете выровнять виджеты вертикально по верху, низу или центру столбца, определив verticalAlignment . Если поле verticalAlignment не определено, виджеты в столбце выравниваются по верху.
В следующем примере текст внутри столбца выравнивается по вертикали вверху:
В следующем примере текст внутри столбца выравнивается по центру:
В следующем примере текст выравнивается по вертикали внутри столбца внизу:
Добавьте сетку для отображения коллекции элементов.
Виджет grid отображает сетку с коллекцией элементов. Сетка поддерживает любое количество столбцов и элементов. Количество строк определяется элементами, разделенными столбцами. Сетка с 10 элементами и 2 столбцами имеет 5 строк. Сетка с 11 элементами и 2 столбцами имеет 6 строк.
Виджет поддерживает предложения, которые помогают пользователям вводить унифицированные данные, и действия при изменении, которые представляют собой Actions , которые выполняются при изменении в поле ввода текста, например, когда пользователь добавляет или удаляет текст.
Следующий пример представляет собой сетку из двух столбцов с одним элементом:
Чтобы определить, где текст будет отображаться вместе с изображением в сетке, вы можете указать поле gridItemLayout . Это поле позволяет вам определить, будет ли текст отображаться над или под элементом в сетке. Если значение gridItemLayout не определено, текст по умолчанию отображается под элементом в сетке.
Следующий пример представляет собой сетку из трех столбцов с текстом и изображением в каждой сетке. Первая сетка определяет текст, который будет отображаться над изображением, вторая сетка определяет текст, который будет отображаться под изображением, а третья сетка не определяет положение текста.
Добавление границы к сетке или столбцу
Для элементов, которые появляются в column или виджете grid , вы можете добавить рамку к этим элементам пользовательского интерфейса, определив поля borderType и borderStyle . Если поле borderStyle не определено, по умолчанию граница не отображается. Вы можете определить borderType , чтобы он применялся ко всем элементам в виджете, или применить стиль к каждому отдельному элементу в виджете.
В следующем примере представлена сетка из двух столбцов с изображением в каждой сетке, где тип, стиль и цвет границы определены для применения ко всем элементам в сетке.
В следующем примере представлена сетка из трех столбцов с изображением в каждой сетке, а стиль и тип границы определяются индивидуально. Первое изображение имеет границу, определенную как STROKE . Второе изображение имеет границу, определенную как NO_BORDER . Третье изображение не имеет границы.
Добавьте постоянный нижний колонтитул
Виджет CardFixedFooter представляет собой нижний колонтитул диалогового сообщения, отправленного приложением чата. Нижние колонтитулы могут включать в себя основную и дополнительную кнопку.
Виджет CardFixedFooter доступен только для диалогов .
Ниже приведен пример виджета CardFixedFooter с двумя кнопками:
Устранение неполадок
Когда приложение или карточка Google Chat возвращает ошибку, в интерфейсе Chat отображается сообщение «Что-то пошло не так». или «Невозможно обработать ваш запрос». Иногда в пользовательском интерфейсе чата не отображается сообщение об ошибке, но приложение или карточка чата выдает неожиданный результат; например, сообщение с карточкой может не появиться.
Хотя сообщение об ошибке может не отображаться в пользовательском интерфейсе чата, доступны описательные сообщения об ошибках и данные журнала, которые помогут вам исправить ошибки, если включено ведение журнала ошибок для приложений чата. Информацию о просмотре, отладке и исправлении ошибок см. в разделе «Устранение неполадок и исправление ошибок Google Chat» .