Formatta la struttura di una scheda o di una finestra di dialogo

In questa pagina viene spiegato come formattare e strutturare i widget in una scheda o in una finestra di dialogo .

Utilizza Card Builder per progettare e visualizzare l'anteprima di messaggi delle schede JSON per le app di chat:

Apri il generatore di schede

Prerequisiti

Un'app di Google Chat abilitata per le funzionalità interattive. Per creare un interattiva di Chat, completa una delle seguenti guide rapide basate nell'architettura dell'app che vuoi utilizzare:

Mostra schede e finestre di dialogo nelle colonne

La Widget columns mostra fino a due colonne in una scheda o in una finestra di dialogo. Puoi aggiungere widget per ogni colonna; i widget vengono visualizzati nell'ordine in cui sono specificato. Per includere più di due colonne o per utilizzare le righe, usa il widget grid.

L'altezza di ogni colonna è determinata dalla colonna più alta. Ad esempio, se la prima colonna è più alta della seconda, entrambe presentano dell'altezza della prima colonna. Poiché ogni colonna può contenere un numero diverso di widget, non puoi definire righe o allineare widget tra le colonne.

L'esempio seguente mostra una scheda con un widget columns che include 2 colonne di testo. Per visualizzare solo il layout delle colonne e comprimere il codice fai clic su Comprimi. Quando lo spazio è vincolato, come nell'esempio seguente, la macro la seconda colonna va a capo sotto la prima.

Definire la larghezza di una colonna

Le colonne vengono visualizzate una accanto all'altra. Puoi personalizzare la larghezza di ogni colonna utilizzando Campo horizontalSizeStyle: Se la larghezza dello schermo dell'utente è troppo ridotta, la seconda colonna va a capo sotto la prima:

  • Sul web, la seconda colonna va a capo se la larghezza dello schermo è inferiore o uguale a 480 pixel.
  • Sui dispositivi iOS, la seconda colonna va a capo se la larghezza dello schermo è inferiore o uguale a 300 pt.
  • Sui dispositivi Android, la seconda colonna va a capo se la larghezza dello schermo è inferiore a o uguale a 320 dp.

L'esempio seguente mostra una scheda con un widget columns che include 2 colonne di testo con 4 elementi nelle colonne. Ogni elemento nelle colonne ha horizontalSizeStyle applicata per manipolare la quantità di spazio disponibile per il testo riempie ogni colonna:

  • Il primo paragrafo di testo utilizza FILL_MINIMUM_SPACE per riempire non più del 30% della larghezza delle schede.
  • Il secondo paragrafo di testo utilizza FILL_AVAILABLE_SPACE per riempire lo spazio disponibile spazio nella larghezza della scheda. In questo esempio, riempie il 70% del standard.
  • Il terzo paragrafo di testo non definisce il valore horizontalSizeStyle, quindi viene usato per impostazione predefinita per riempire lo spazio disponibile per la scheda.
  • Il quarto paragrafo di testo utilizza FILL_MINIMUM_SPACE per riempire non più del 30% della larghezza delle schede.

Definire l'allineamento orizzontale di una colonna

Puoi allineare i widget orizzontalmente a sinistra, a destra o al centro di una colonna la definizione Campo horizontalAligment: Se il campo horizontalAlignment non è definito, i widget sono allineati al campo a sinistra nella colonna.

Il seguente esempio consente di allineare orizzontalmente il testo all'interno di una colonna a sinistra:

Il seguente esempio consente di allineare orizzontalmente il testo all'interno di una colonna al centro:

Il seguente esempio consente di allineare orizzontalmente il testo di una colonna a destra:

Definire l'allineamento verticale di una colonna

Puoi allineare i widget verticalmente in alto, in basso o al centro di una colonna la definizione Campo verticalAlignment: Se il campo verticalAlignment non è definito, i widget in una colonna sono allineati in alto.

L'esempio seguente consente di allineare verticalmente il testo di una colonna in alto:

L'esempio seguente consente di allineare verticalmente il testo all'interno di una colonna al centro:

L'esempio seguente consente di allineare verticalmente il testo all'interno di una colonna in basso:

Aggiungi un divisore orizzontale tra i widget

La Widget divider mostra una linea orizzontale che copre la larghezza di una scheda tra widget impilati verticalmente. La linea è un divisore visivo che aiuta gli utenti distinguono un widget dall'altro, semplificando la scansione delle schede e capire.

Di seguito è riportata una scheda composta da widget divider tra altri tipi di widget:

Visualizzare una griglia con una raccolta di elementi

La Widget grid mostra una griglia con una raccolta di elementi. Una griglia supporta un numero qualsiasi di come colonne ed elementi. Il numero di righe è determinato dagli elementi divisi per le colonne. Una griglia con 10 elementi e 2 colonne ha 5 righe. Una griglia con 11 elementi e 2 ha 6 righe.

Il widget supporta i suggerimenti, che aiutano gli utenti a inserire dati uniformi e azioni in caso di modifica, Actions che vengono eseguite quando si verifica una modifica nel campo di immissione testo, come un utente che aggiunge o l'eliminazione di testo.

L'esempio seguente è una griglia a 2 colonne con un singolo elemento:

Definisci la posizione del testo con un'immagine in una griglia

La Campo gridItemLayout consente di definire all'interno di ogni gridItem, se il testo appare sopra o sotto l'elemento nella griglia. Se il campo gridItemLayout non è definito, il testo è impostato sul valore predefinito vengono visualizzati sotto l'elemento nella griglia

L'esempio seguente è una griglia a 3 colonne con testo e un'immagine in ogni griglia. La prima griglia definisce il testo da visualizzare sopra l'immagine, la seconda "Griglia" definisce il testo da visualizzare sotto l'immagine, mentre la terza griglia la posizione del testo.

Aggiungere un bordo agli elementi UI

Per gli elementi visualizzati in un widget column o grid, puoi aggiungere un bordo a a questi elementi UI definendo un Campo borderType e un Campo borderStyle. Se non viene definito alcun campo borderStyle, per impostazione predefinita non viene mostrato alcun bordo. Puoi definisci un borderType da applicare a tutti gli elementi all'interno di un widget o applica lo stile a ogni singolo elemento di un widget.

L'esempio seguente è una griglia a 2 colonne con un'immagine in ogni griglia in cui il tipo, lo stile e il colore del bordo sono stati definiti per essere applicati a tutti gli elementi all'interno a griglia.

L'esempio seguente è una griglia a 3 colonne con un'immagine in ogni griglia e la lo stile e il tipo di bordo definiti singolarmente. Il primo l'immagine ha un bordo definito come STROKE. La seconda immagine ha un bordo definito come NO_BORDER. La terza immagine non ha alcun bordo definito.

Risoluzione dei problemi

Quando un'app Google Chat o card restituisce un errore, L'interfaccia di Chat mostra il messaggio "Si è verificato un problema". o "Impossibile elaborare la richiesta". A volte, l'UI di Chat non mostra alcun messaggio di errore, ma l'app Chat o la scheda restituisce un risultato inaspettato; Ad esempio, il messaggio di una scheda potrebbe non vengono visualizzate.

Anche se un messaggio di errore potrebbe non essere visualizzato nella UI di Chat, messaggi di errore descrittivi e dati di log che ti aiuteranno a correggere gli errori quando il logging degli errori per le app di chat è attivo. Per assistenza con la visualizzazione, il debug e la correzione degli errori, consulta Risolvere i problemi e correggere gli errori di Google Chat.