Sformatuj strukturę karty lub okna

Z tej strony dowiesz się, jak formatować i porządkować widżety na karcie lub w oknie. .

Za pomocą kreatora kart możesz zaprojektować i wyświetlić podgląd wiadomości kart JSON przeznaczonych do aplikacji Google Chat:

Otwórz kreator kart

Wymagania wstępne

Aplikacja Google Chat, w której można korzystać z funkcji interaktywnych. Aby utworzyć interaktywna aplikacja do obsługi czatu, wykonaj jedno z tych krótkich wprowadzeń dotyczące architektury aplikacji, której chcesz używać:

Wyświetlaj karty i okna w kolumnach

Widżet columns wyświetla maksymalnie 2 kolumny na karcie lub w oknie. Możesz dodać widżety do poszczególnych kolumn, widżety wyświetlają się w kolejności, w jakiej są określone dane. Aby uwzględnić więcej niż 2 kolumny lub użyć wierszy, użyj widżetu grid.

Wysokość każdej kolumny jest określana na podstawie wyższej kolumny. Na przykład, jeśli pierwsza kolumna jest wyższa od drugiej, obie kolumny mają wysokości pierwszej kolumny. Ponieważ każda kolumna może zawierać inną liczbę widżetów, nie można definiować wierszy ani wyrównywać widżetów między kolumnami.

Poniżej znajduje się przykład karty z widżetem columns zawierającym: Dwie kolumny tekstu. Aby wyświetlić tylko układ kolumn i zwinąć kod kliknij Zwiń. Gdy przestrzeń jest ograniczona, jak w przykładzie poniżej, zawija się pod pierwszą kolumnę.

Określanie szerokości kolumny

Kolumny są wyświetlane obok siebie. Możesz dostosować szerokość każdej kolumny za pomocą Pole horizontalSizeStyle. Jeśli szerokość ekranu użytkownika jest zbyt wąska, druga kolumna otacza się pierwszą kolumną:

  • W internecie druga kolumna zawija się, jeśli szerokość ekranu jest mniejsza lub równa 480 pikseli.
  • Na urządzeniach z iOS druga kolumna zawija się, jeśli szerokość ekranu jest mniejsza niż lub równy 300 punktów.
  • Na urządzeniach z Androidem druga kolumna zawija się, jeśli szerokość ekranu jest mniejsza niż lub równy 320 dp.

Poniżej znajduje się przykład karty z widżetem columns zawierającym: Dwie kolumny z tekstem zawierającym 4 elementy. Każdy element w tych kolumnach ma Zastosowano horizontalSizeStyle, aby zmienić rozmiar tekstu wypełnia każdą kolumnę:

  • Pierwszy akapit tekstu wykorzystuje pole FILL_MINIMUM_SPACE, aby wypełnić nie więcej niż 30% od szerokości karty.
  • W drugim akapicie tekstu FILL_AVAILABLE_SPACE wypełnia dostępnego tekst na szerokość karty. W tym przykładzie wypełnia on 70% .
  • Trzeci akapit tekstu nie definiuje elementu horizontalSizeStyle, więc jest to wartość domyślna aby wypełnić dostępne miejsce na karcie.
  • Czwarty akapit tekstu wykorzystuje pole FILL_MINIMUM_SPACE, aby wypełnić nie więcej niż 30% od szerokości karty.

Definiowanie wyrównania kolumny w poziomie

Widżety możesz wyrównać w poziomie do lewej, prawej lub do środka kolumny, która określa Pole horizontalAligment. Jeśli wartość horizontalAlignment jest niezdefiniowana, widżety są wyrównane do po lewej w kolumnie.

W tym przykładzie tekst został wyrównany w poziomie w kolumnie do lewej:

Ten przykład wyrównania tekstu w poziomie w kolumnie na środku:

W tym przykładzie tekst został wyrównany w poziomie w kolumnie do prawej:

Definiowanie wyrównania pionowego kolumny

Widżety możesz wyrównać w pionie do góry, na dole lub do środka kolumny: która określa Pole verticalAlignment. Jeśli pole verticalAlignment jest niezdefiniowane, widżety w kolumnie są wyrównane. do góry.

W tym przykładzie wyrównano tekst w kolumnie do góry:

Ten przykład wyrównania tekstu w pionie w kolumnie na środku:

Ten przykład wyrównania tekstu w pionie w kolumnie na dole:

Dodaj poziomy separator między widżetami

Widżet divider wyświetla poziomą linię rozciągającą się wzdłuż szerokości karty. między widżetami ułożonymi pionowo. Linia jest wizualnym rozgraniczeniem, które pomaga użytkownicy mogą odróżnić widżety od innych, co ułatwia skanowanie kart. i rozumieć.

Poniżej znajduje się karta składająca się z widżetu divider między innymi typami widżety:

Wyświetlanie siatki z kolekcją elementów

Widżet grid wyświetla siatkę z kolekcją elementów. Siatka obsługuje dowolną liczbę kolumn i elementów. Liczba wierszy jest określana przez podział elementów przez kolumny. Siatka z 10 elementami i 2 kolumnami ma 5 wierszy. Siatka z 11 elementami i 2 elementami kolumny mają 6 wierszy.

Widżet obsługuje sugestie, które pomagają użytkownikom wpisywać jednolite dane. działań związanych ze zmianą, Actions uruchamianych, gdy nastąpi zmiana w polu do wprowadzania tekstu, np. dodanie przez użytkownika Usuwanie tekstu.

Ten przykład przedstawia siatkę z 2 kolumnami i 1 elementem:

Określ, gdzie na siatce pojawia się tekst z obrazem

Pole gridItemLayout pozwala określić w każdym elemencie gridItem, czy tekst ma być wyświetlany powyżej czy poniżej element w siatce. Jeśli gridItemLayout jest niezdefiniowany, domyślnie stosowany jest tekst są wyświetlane pod elementem w siatce

Poniższy przykład to siatka z 3 kolumnami z tekstem i obrazem w każdej siatce. Pierwsza siatka określa tekst, który ma być wyświetlany nad obrazem, siatka definiuje tekst wyświetlany pod obrazem, a trzecia nie definiuje pozycji tekstu.

Dodawanie obramowania do elementów interfejsu

W przypadku elementów wyświetlanych w widżecie column lub grid możesz dodać obramowanie do tych elementów interfejsu, definiując Pole borderType i Pole borderStyle. Jeśli nie zdefiniowano żadnego pola borderStyle, domyślnie jest ono wyświetlane bez obramowania. Dostępne opcje zdefiniuj element borderType, który zostanie zastosowany do wszystkich elementów w widżecie lub zastosuj styl do poszczególnych elementów w widżecie.

W poniższym przykładzie przedstawiono siatkę złożoną z dwóch kolumn z obrazem w każdej siatce, w której typ, styl i kolor obramowania zostały tak zdefiniowane, by miały zastosowanie do wszystkich elementów siatkę.

W poniższym przykładzie przedstawiono siatkę złożoną z trzech kolumn z obrazem w każdej siatce oraz stylu i typu obramowania zdefiniowane osobno. Pierwszy obraz ma obramowanie zdefiniowane jako STROKE. Drugi obraz ma obramowanie zdefiniowane jako NO_BORDER Trzeci obraz nie ma zdefiniowanej obramowania.

Rozwiązywanie problemów

Gdy aplikacja Google Chat lub card zwraca błąd, Interfejs czatu wyświetla komunikat „Coś poszło nie tak”. lub „Nie można przetworzyć żądania”. Czasami interfejs Google Chat nie wyświetla się żaden komunikat o błędzie, ale aplikacja Google Chat lub zwraca nieoczekiwany wynik; na przykład wiadomość w formie karty .

Komunikat o błędzie może nie wyświetlać się w interfejsie Google Chat, opisowe komunikaty o błędach i dane dziennika, które pomogą Ci w naprawianiu błędów gdy logowanie błędów aplikacji Google Chat jest włączone. Aby uzyskać pomoc w wyświetlaniu, debugowania i naprawiania błędów, zapoznaj się z artykułem Rozwiązywanie problemów z błędami w Google Chat