Эта страница переведена с помощью Cloud Translation API.

Создавайте карточки для приложений Google Chat

На этой странице описывается, как создать компоненты и структуру карточки . Карточки — это пользовательские интерфейсы, которые приложения Google Chat могут использовать для представления и сбора информации от пользователей. Приложения чата могут создавать и отображать карточки в следующих интерфейсах:

Сообщения , содержащие одну или несколько карточек.
Домашние страницы — карточка, которая появляется на вкладке «Главная» в прямых сообщениях в приложении «Чат».
Диалоги — карточки, которые открываются в новом окне из сообщений и домашних страниц.

На этой странице вы узнаете о следующих компонентах карты:

Заголовки , которые обычно содержат название карточки или раздела карточки.
Разделы , составляющие основную часть карточки, включая виджеты и другие интерактивные элементы. В разделе карточки можно добавить дополнительную структуру, включая столбцы и сетки.
Фиксированные нижние колонтитулы , которые появляются в нижней части диалоговых окон и служат для отображения постоянных элементов пользовательского интерфейса, таких как кнопки.

Предпосылки

Приложение Google Chat, настроенное на получение событий взаимодействия и реагирование на них. Чтобы создать интерактивное приложение Chat, выполните одно из следующих быстрых действий в зависимости от архитектуры приложения , которую вы хотите использовать:

Используйте Card Builder для проектирования и предварительного просмотра сообщений и пользовательских интерфейсов для приложений чата:

Откройте конструктор карт

Добавить заголовок

Виджет CardHeader представляет собой заголовок карточки. Заголовки могут включать название, подзаголовок и изображение аватара для вашей карточки.

Ниже приведен пример CardHeader :

Добавьте один или несколько разделов карты

Виджет CardSection — это высокоуровневый контейнер внутри карточки. Разделы карточки используются для группировки виджетов внутри карточки. Для каждого раздела карточки можно добавить заголовок и один или несколько виджетов.

Ниже приведен пример CardSection , содержащего два виджета textParagraph :

Добавить горизонтальный разделитель между виджетами

Виджет divider отображает горизонтальную линию, охватывающую всю ширину карточки между вертикально расположенными виджетами. Эта линия — визуальный разделитель, который помогает пользователям различать виджеты, упрощая просмотр и понимание карточек.

Ниже представлена карточка, состоящая из виджета- divider между другими типами виджетов:

Добавить столбцы

Виджет columns отображает до двух столбцов на карточке. Вы можете добавлять виджеты в каждый столбец; они отображаются в указанном порядке. Чтобы добавить более двух столбцов или использовать строки, используйте виджет grid .

Высота каждого столбца определяется высотой более высокого столбца. Например, если первый столбец выше второго, оба столбца будут иметь высоту первого столбца. Поскольку каждый столбец может содержать разное количество виджетов, невозможно определить строки или выровнять виджеты между столбцами.

В следующем примере показана карточка с виджетом « columns , содержащим два столбца текста. Чтобы просмотреть только макет столбцов и свернуть пример кода, нажмите кнопку «Свернуть» . При ограниченном пространстве, как в следующем примере, второй столбец переносится под первый.

Определите ширину столбца

Столбцы отображаются рядом друг с другом. Ширину каждого столбца можно настроить с помощью поля horizontalSizeStyle . Если ширина экрана пользователя слишком узкая, второй столбец будет перенесен ниже первого:

На веб-страницах второй столбец переносится, если ширина экрана меньше или равна 480 пикселям.
На устройствах iOS второй столбец переносится, если ширина экрана меньше или равна 300 пт.
На устройствах Android второй столбец переносится, если ширина экрана меньше или равна 320 dp.

В следующем примере показана карточка с виджетом « columns , содержащим два столбца текста с четырьмя элементами в каждом. К каждому элементу в столбцах применен стиль 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 . Рамка третьего изображения не определена.

Добавить карусель

Виджет Carousel отображает коллекцию объектов CarouselCard , которые можно прокручивать на экране и сворачивать. К каждому объекту CarouselCard можно добавить несколько виджетов.

Добавить постоянный нижний колонтитул

Виджет CardFixedFooter представляет собой нижний колонтитул диалогового сообщения, отправленного приложением Chat. Нижний колонтитул может включать в себя основную и дополнительную кнопки.

Виджет CardFixedFooter доступен только для диалоговых окон .

Ниже приведен пример виджета CardFixedFooter с двумя кнопками:

Устранение неполадок

Когда приложение или карточка Google Chat возвращает ошибку, в интерфейсе Chat отображается сообщение «Что-то пошло не так» или «Не удалось обработать ваш запрос». Иногда в интерфейсе Chat не отображается сообщение об ошибке, но приложение или карточка Chat выдаёт неожиданный результат; например, сообщение может не появиться.

Хотя сообщение об ошибке может не отображаться в пользовательском интерфейсе чата, при включенном ведении журнала ошибок для приложений чата доступны описательные сообщения об ошибках и данные журнала, которые помогут вам исправить ошибки. Сведения о просмотре, отладке и исправлении ошибок см. в статье «Устранение неполадок и исправление ошибок Google Chat» .