Cómo darle formato a la estructura de una tarjeta o un diálogo

En esta página, se explica cómo dar formato y estructurar widgets en una tarjeta o un diálogo mensaje.

Usa Card Builder para diseñar mensajes de tarjetas JSON y obtener una vista previa de ellos para apps de Chat:

Abre el Creador de tarjetas

Requisitos previos

Una app de Google Chat habilitada para funciones interactivas. Para crear un app de Chat interactiva, completa una de las siguientes guías de inicio rápido en la arquitectura de app que quieres usar:

Cómo mostrar tarjetas y diálogos en columnas

El Widget columns muestra hasta 2 columnas en una tarjeta o un diálogo. Puedes agregar widgets a cada columna; los widgets aparecen en el orden en que están especificada. Para incluir más de 2 columnas o usar filas, usa el widget grid.

La altura de cada columna está determinada por la columna más alta. Por ejemplo, si la primera columna es más alta que la segunda, ambas tienen la la altura de la primera columna. Debido a que cada columna puede contener un número diferente, de los widgets, no puedes definir filas o alinear widgets entre las columnas.

En el siguiente ejemplo, se muestra una tarjeta con un widget columns que muestra 2 columnas de texto. Para ver solo el diseño de las columnas y contraer el código muestra, haz clic en Contraer. Cuando el espacio es limitado, como en el siguiente ejemplo, el la segunda columna se une debajo de la primera.

Define el ancho de una columna

Las columnas se muestran una al lado de la otra. Puedes personalizar el ancho de cada columna con el Campo horizontalSizeStyle. Si el ancho de la pantalla del usuario es demasiado angosto, la segunda columna se ajustará debajo de la primera:

  • En la Web, la segunda columna se ajusta si el ancho de la pantalla es menor o igual que 480 píxeles
  • En dispositivos iOS, la segunda columna se ajusta si el ancho de la pantalla es menor que igual a 300 pt.
  • En dispositivos Android, la segunda columna se ajusta si el ancho de la pantalla es menor que o igual a 320 dp.

En el siguiente ejemplo, se muestra una tarjeta con un widget columns que muestra 2 columnas de texto con 4 elementos en las columnas Cada elemento de las columnas tiene Se aplicó horizontalSizeStyle para manipular el espacio del texto llena cada columna:

  • El primer párrafo de texto usa FILL_MINIMUM_SPACE para completar no más del 30% del ancho de las tarjetas.
  • El segundo párrafo de texto usa FILL_AVAILABLE_SPACE para completar la información espacio en el ancho de la tarjeta. En este ejemplo, llena el 70% de la superficie de la tarjeta ancho.
  • El tercer párrafo de texto no define horizontalSizeStyle, por lo que se establece de forma predeterminada. para llenar el espacio disponible de la tarjeta.
  • El cuarto párrafo de texto usa FILL_MINIMUM_SPACE para completar no más del 30% del ancho de las tarjetas.

Define la alineación horizontal de una columna

Puedes alinear los widgets horizontalmente a la izquierda, a la derecha o al centro de una columna definir Campo horizontalAligment. Si el campo horizontalAlignment no está definido, los widgets se alinean con el de la columna.

En el siguiente ejemplo, se alinea horizontalmente el texto de una columna a la izquierda:

En el siguiente ejemplo, se alinea horizontalmente el texto dentro de una columna en el centro:

En el siguiente ejemplo, se alinea horizontalmente el texto de una columna hacia la derecha:

Definir la alineación vertical de una columna

Puedes alinear los widgets verticalmente en la parte superior, inferior o central de una columna definir Campo verticalAlignment. Si el campo verticalAlignment no está definido, los widgets de una columna se alinean. a la parte superior.

En el siguiente ejemplo, se alinea verticalmente el texto de una columna con la parte superior:

En el siguiente ejemplo, se alinea el texto verticalmente dentro de una columna en el centro:

En el siguiente ejemplo, se alinea el texto verticalmente en una columna de la parte inferior:

Agregar un divisor horizontal entre widgets

El Widget divider muestra una línea horizontal que abarca el ancho de una tarjeta entre widgets apilados verticalmente. La línea es un divisor visual que ayuda los usuarios distinguen entre un widget y otro, lo que hace que las tarjetas sean más fáciles de escanear. y comprenderlos.

La siguiente es una tarjeta que consta de un widget de divider entre otros tipos de widgets:

Muestra una cuadrícula con una colección de elementos

El Widget grid muestra una cuadrícula con una colección de elementos. Una cuadrícula admite cualquier cantidad de como columnas y elementos. La cantidad de filas se determina mediante los elementos divididos por columnas. Una cuadrícula con 10 elementos y 2 columnas tiene 5 filas. Una cuadrícula con 11 elementos y 2 columnas tiene 6 filas.

El widget admite sugerencias, que ayudan a los usuarios a ingresar datos uniformes. acciones ante cambios, que son Actions que se ejecutan cuando se produce un cambio en el campo de entrada de texto, como cuando un usuario agrega o borrar texto.

El siguiente ejemplo es una cuadrícula de 2 columnas con un solo elemento:

Define dónde aparecerá el texto con una imagen en una cuadrícula

El Campo gridItemLayout te permite definir dentro de cada gridItem, si el texto aparece arriba o debajo el elemento de la cuadrícula. Si gridItemLayout no está definido, el texto se establece de forma predeterminada como aparecen debajo del elemento en la cuadrícula

El siguiente ejemplo es una cuadrícula de 3 columnas con texto y una imagen en cada cuadrícula. La primera cuadrícula define el texto que aparece sobre la imagen, la segunda cuadrícula define el texto que aparece debajo de la imagen, y la tercera no define la posición del texto.

Cómo agregar un borde a los elementos de la IU

Para los elementos que aparecen en un widget column o grid, puedes agregar un borde de estos elementos de la IU definiendo un Campo borderType y un Campo borderStyle. Si no se define un campo borderStyle, no se muestra ningún borde de forma predeterminada. Puedes definir un borderType para aplicar a todos los elementos dentro de un widget o aplicar el estilo a cada elemento individual dentro de un widget.

El siguiente ejemplo es una cuadrícula de 2 columnas con una imagen en cada cuadrícula en la que el tipo, el estilo y el color de borde se han definido para aplicar a todos los elementos dentro del cuadrícula.

El siguiente ejemplo es una cuadrícula de 3 columnas con una imagen en cada cuadrícula y los el estilo y el tipo de borde definidos individualmente. La primera tiene un borde definido como STROKE. La segunda imagen tiene un borde definido como NO_BORDER La tercera imagen no tiene ningún borde definido.

Solucionar problemas

Cuando una app de Google Chat o card muestra un error, el En la interfaz de Chat, aparece un mensaje que dice “Se produjo un error”. o "No se pudo procesar la solicitud". A veces, la IU de Chat no muestra ningún mensaje de error, pero la app de Chat la tarjeta produce un resultado inesperado; Por ejemplo, es posible que un mensaje de tarjeta no para que aparezca la opción.

Aunque es posible que no aparezca un mensaje de error en la IU de Chat, Hay mensajes de error descriptivos y datos de registro disponibles para ayudarte a corregir errores. Cuando se activa el registro de errores de las apps de Chat. Para obtener ayuda sobre la visualización, la depuración y la corrección de errores, consulta Soluciona problemas y corrige errores de Google Chat.