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

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

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

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

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

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

Предпосылки

Приложение 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 при изменении, которые запускаются при изменении поля ввода текста, например, когда пользователь добавляет или удаляет текст.

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

Чтобы определить, где в сетке будет отображаться текст с изображением, можно указать поле gridItemLayout . Это поле позволяет определить, будет ли текст отображаться над или под элементом в сетке. Если gridItemLayout не определен, текст по умолчанию будет отображаться под элементом в сетке.

Следующий пример — это сетка из трех столбцов с текстом и изображением в каждой сетке. Первая сетка определяет текст, который должен отображаться над изображением, вторая сетка определяет текст, который должен отображаться под изображением, а третья сетка не определяет положение текста.

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

Для элементов, которые отображаются в column или виджете grid , вы можете добавить границу к этим элементам пользовательского интерфейса, определив поля borderType и borderStyle . Если поле borderStyle не определено, по умолчанию граница не отображается. Вы можете определить borderType для применения ко всем элементам в виджете или применить стиль к каждому отдельному элементу в виджете.

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

Следующий пример — это сетка из 3 столбцов с изображением в каждой сетке и стилем и типом границы, определенными индивидуально. Первое изображение имеет границу, определенную как STROKE . Второе изображение имеет границу, определенную как NO_BORDER . Третье изображение не имеет определенной границы.

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

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

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

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

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

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

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

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

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