Struktur einer Karte oder eines Dialogfelds formatieren

Auf dieser Seite wird erläutert, wie Sie Widgets in einer Karte oder einem Dialogfeld formatieren und strukturieren. angezeigt.

Mit dem Card Builder können Sie JSON-Kartennachrichten für Chat-Apps erstellen und als Vorschau ansehen:

Card Builder öffnen

Vorbereitung

Eine Google Chat App mit aktivierten interaktiven Funktionen. So erstellen Sie ein Chat-App verwenden, führen Sie eine der folgenden Kurzanleitungen aus für die App-Architektur, die Sie verwenden möchten:

Karten und Dialogfelder in Spalten anzeigen

Die columns-Widget zeigt bis zu zwei Spalten in einer Karte oder einem Dialogfeld an. Sie können Widgets hinzufügen. erscheinen die Widgets in der Reihenfolge, angegeben ist. Wenn Sie mehr als zwei Spalten einfügen oder Zeilen verwenden möchten, verwenden Sie das grid-Widget.

Die Höhe jeder Spalte wird durch die höhere Spalte bestimmt. Beispiel: ist die erste Spalte höher als die zweite Spalte, haben beide Spalten Höhe der ersten Spalte. Weil jede Spalte eine andere Zahl enthalten kann, von Widgets können Sie keine Zeilen definieren oder Widgets zwischen den Spalten ausrichten.

Im folgenden Beispiel wird eine Karte mit einem columns-Widget angezeigt, das Folgendes enthält: 2 Textspalten. Um nur das Spaltenlayout anzuzeigen und den Code zu minimieren auf Minimieren. Wenn der Platz eingeschränkt ist, wie im folgenden Beispiel, wird der wird die zweite Spalte unter die erste eingefügt.

Breite einer Spalte definieren

Die Spalten werden nebeneinander angezeigt. Sie können die Breite jeder Spalte anpassen. mithilfe der Feld horizontalSizeStyle. Wenn die Bildschirmbreite des Nutzers zu schmal ist, wird die zweite Spalte unter der ersten angezeigt:

  • Im Web wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite kleiner oder gleich 480 Pixel.
  • Auf iOS-Geräten wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite kleiner als oder von 300 Punkten entspricht.
  • Auf Android-Geräten wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite kleiner als 320 dp entsprechen.

Im folgenden Beispiel wird eine Karte mit einem columns-Widget angezeigt, das Folgendes enthält: 2 Textspalten mit 4 Elementen in den Spalten. Jedes Element in den Spalten hat horizontalSizeStyle angewendet, um den Abstand des Textes zu ändern Spalte gefüllt:

  • Im ersten Textabschnitt wird FILL_MINIMUM_SPACE verwendet, um nicht mehr als 30 % auszufüllen. der Kartenbreite aus.
  • Im zweiten Absatz wird FILL_AVAILABLE_SPACE verwendet, um die verfügbaren in der Breite der Karte ein. In diesem Beispiel füllt er 70% der Breite.
  • Im dritten Absatz wird horizontalSizeStyle nicht definiert, daher wird hier die Standardeinstellung verwendet. um den verfügbaren Bereich der Karte auszufüllen.
  • Im vierten Absatz wird FILL_MINIMUM_SPACE verwendet, um nicht mehr als 30 % auszufüllen. der Kartenbreite aus.

Horizontale Ausrichtung einer Spalte definieren

Sie können Widgets horizontal an der linken, rechten oder Mitte einer Spalte ausrichten, indem Sie der Definition der Feld horizontalAligment. Wenn das Feld horizontalAlignment nicht definiert ist, werden Widgets am links in der Spalte.

Im folgenden Beispiel wird Text in einer Spalte horizontal links ausgerichtet:

Im folgenden Beispiel wird Text innerhalb einer Spalte horizontal in der Mitte ausgerichtet:

Im folgenden Beispiel wird der Text in einer Spalte horizontal auf der rechten Seite ausgerichtet:

Vertikale Ausrichtung einer Spalte festlegen

Sie können Widgets vertikal am oberen, unteren oder mittleren Rand einer Spalte ausrichten, indem Sie der Definition der Feld verticalAlignment. Wenn das Feld verticalAlignment nicht definiert ist, werden die Widgets in einer Spalte ausgerichtet. ganz oben.

Im folgenden Beispiel wird der Text in einer Spalte vertikal am oberen Rand ausgerichtet:

Im folgenden Beispiel wird Text innerhalb einer Spalte vertikal zentriert:

Im folgenden Beispiel wird Text innerhalb einer Spalte am unteren Rand vertikal ausgerichtet:

Horizontale Trennlinie zwischen Widgets hinzufügen

Die divider-Widget Es wird eine horizontale Linie angezeigt, die die Breite einer Karte umfasst. zwischen vertikal gestapelten Widgets. Die Linie ist eine visuelle Trennlinie, die hilft, Nutzer können zwischen Widgets unterscheiden, was das Scannen von Karten erleichtert. und zu verstehen.

Das folgende Beispiel zeigt eine Karte mit einem divider-Widget zwischen anderen Arten von Widgets:

Raster mit einer Sammlung von Elementen anzeigen

Die grid-Widget zeigt ein Raster mit einer Sammlung von Elementen an. Ein Raster unterstützt beliebig viele Spalten und Elemente. Die Anzahl der Zeilen ergibt sich aus den Elementen geteilt durch die Spalten. Ein Raster mit 10 Elementen und 2 Spalten hat 5 Zeilen. Ein Raster mit 11 Elementen und 2 hat 6 Zeilen.

Das Widget unterstützt Vorschläge, mit denen Nutzer einheitliche Daten eingeben können. bei Änderungen, die Actions die ausgeführt werden, wenn eine Änderung im Texteingabefeld vorgenommen wird, z. B. wenn ein Nutzer Text löschen.

Das folgende Beispiel zeigt ein zweispaltiges Raster mit einem einzelnen Element:

Lege fest, wo Text mit einem Bild in einem Raster angezeigt werden soll

Die Feld „gridItemLayout“ können Sie in jedem gridItem definieren, ob der Text darüber oder darunter angezeigt wird das Element im Raster aus. Wenn gridItemLayout nicht definiert ist, wird standardmäßig der Text verwendet. werden unterhalb des Elements im Raster angezeigt.

Das folgende Beispiel zeigt ein dreispaltiges Raster mit Text und einem Bild in jedem Raster. Das erste Raster legt fest, dass der Text über dem Bild angezeigt wird, das zweite Raster definiert, dass Text unter dem Bild angezeigt wird, und das dritte Raster definiert nicht die Position des Textes.

Rahmen zu UI-Elementen hinzufügen

Elemente, die in einem column- oder grid-Widget angezeigt werden, können dem UI-Elementen hinzufügen, indem Sie eine Feld „borderType“ und Feld borderStyle. Wenn kein borderStyle-Feld definiert ist, wird standardmäßig kein Rahmen angezeigt. Sie können Definieren Sie eine borderType, die auf alle Elemente in einem Widget angewendet wird, oder wenden Sie den Stil an für jedes einzelne Element in einem Widget hinzufügen.

Das folgende Beispiel zeigt ein zweispaltiges Raster mit einem Bild in jedem Raster, bei dem der Rahmentyp, -stil und -farbe definiert und auf alle Elemente im Raster.

Das folgende Beispiel zeigt ein dreispaltiges Raster mit einem Bild in jedem Raster und dem Rahmenlinienstil und -typ einzeln definiert werden. Das erste Bild hat einen Rahmen, der als STROKE definiert ist. Das zweite Bild hat einen Rahmen, NO_BORDER Für das dritte Bild ist kein Rahmen definiert.

Fehlerbehebung

Wenn eine Google Chat-App oder card gibt einen Fehler zurück. Der Parameter In der Chatoberfläche wird die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage kann nicht verarbeitet werden.“ Manchmal kann die Chat-UI Es wird zwar keine Fehlermeldung angezeigt, aber die Chat-App oder die Karte zu einem unerwarteten Ergebnis führt. z. B. wird eine Kartennachricht angezeigt werden.

Auch wenn in der Chat-Benutzeroberfläche möglicherweise keine Fehlermeldung angezeigt wird, beschreibende Fehlermeldungen und Protokolldaten stehen zur Fehlerbehebung zur Verfügung. wenn die Fehlerprotokollierung für Chat-Apps aktiviert ist. Hilfe bei der Anzeige: Debugging und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben