Karten für Google Chat-Apps erstellen

Auf dieser Seite wird beschrieben, wie die Komponenten und Strukturen card. Infokarten sind Nutzer Schnittstellen, mit denen Google Chat-Apps Inhalte präsentieren und Daten erheben können von Google Chat-Nutzern. Chat-Apps können und Displaykarten auf den folgenden Oberflächen:

  • Nachrichten die eine oder mehrere Karten enthalten.
  • Startseiten Dabei handelt es sich um eine Karte, die direkt auf dem Tab Startseite mit der Chat App.
  • Dialogfelder: Karten, die sich öffnen Nachrichten und Startseiten in einem neuen Fenster öffnen.

Auf dieser Seite lernen Sie die folgenden Komponenten einer Karte kennen:

  • Header, die in der Regel den Titel einer Karte oder einer Karte enthalten .
  • Abschnitte, die den Haupttext bilden der Karte, einschließlich Widgets und anderer interaktiver Elemente. Auf einer Karte können Sie der Karte mehr Struktur hinzufügen, einschließlich Spalten und Rastern.
  • Feste Fußzeilen, die am unteren Rand des um dauerhafte UI-Elemente wie Schaltflächen anzuzeigen.

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:

Mit dem Card Builder können Sie Nachrichten und Benutzeroberflächen für Chat-Apps entwerfen und als Vorschau anzeigen lassen:

Card Builder öffnen

Header hinzufügen

CardHeader-Widget steht für den Header einer Karte. Header können Folgendes enthalten: Titel, Untertitel und ein Avatarbild für die Karte.

Hier ein Beispiel für ein CardHeader-Objekt:

Einen oder mehrere Kartenbereiche hinzufügen

CardSection-Widget ist ein übergeordneter Container innerhalb einer Karte. Du verwendest die Karte um Widgets auf einer Karte zu gruppieren. Für jeden Kartenbereich können Sie eine Kopfzeile und ein oder mehrere Widgets.

Das folgende Beispiel zeigt ein CardSection-Objekt, das zwei textParagraph-Elemente enthält. Widgets:

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, wodurch das Scannen von Karten vereinfacht wird. und zu verstehen.

Die folgende Karte enthält ein divider-Widget zwischen anderen Arten von Widgets:

Spalten hinzufügen

Die columns-Widget bis zu zwei Spalten auf einer Karte anzuzeigen. 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. Wenn beispielsweise 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.

Spaltenbreite 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 dem Erstens:

  • 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. die Breite der Karte ein.
  • 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. die Breite der Karte ein.

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 einer 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:

Raster hinzufügen, um mehrere Elemente anzuzeigen

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:

Um festzulegen, wo Text mit einem Bild in einem Raster angezeigt wird, können Sie die Feld gridItemLayout. In diesem Feld können Sie festlegen, ob der Text ober- oder unterhalb dieser Elemente angezeigt werden soll. 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.

Rastern oder Spalten Rahmen 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 borderStyle-Feld. 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.

Die CardFixedFooter das die Fußzeile einer von einem eine Chat-App. Fußzeilen können eine primäre und eine sekundäre Schaltfläche enthalten.

Das CardFixedFooter-Widget ist nur verfügbar für Dialogfelder.

Das folgende Beispiel zeigt ein CardFixedFooter-Widget mit zwei Schaltflächen:

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