Tworzenie kart do aplikacji Google Chat

Na tej stronie opisujemy, jak tworzyć komponenty i strukturę . Karty są przypisane do użytkownika interfejsy, których aplikacje Google Chat mogą używać do prezentowania i zbierania danych; informacje od użytkowników Google Chat. Aplikacje do obsługi czatu i wyświetlać karty w tych interfejsach:

  • Wiadomości które zawierają co najmniej jedną kartę.
  • Strony główne, czyli kartę, która pojawia się na karcie Strona główna bezpośrednio wiadomości w aplikacji Google Chat.
  • okna dialogowe, czyli otwierane karty. w nowym oknie z wiadomości i stron głównych.

Na tej stronie poznasz te elementy karty:

  • nagłówki, które zwykle zawierają tytuł karty lub karty; .
  • sekcje, które stanowią główną treść; karty wraz z widżetami i innymi interaktywnymi elementami. Na karcie możesz dodać do karty więcej struktury, w tym kolumny i siatki.
  • Stałe stopki, które pojawiają się u dołu do wyświetlania stałych elementów interfejsu, takich jak przyciski.

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

Za pomocą kreatora kart możesz zaprojektować i wyświetlić podgląd komunikatów oraz interfejsów użytkownika aplikacji do obsługi czatu:

Otwórz kreator kart

Dodaj nagłówek

Widżet CardHeader reprezentuje nagłówek karty. Nagłówki mogą zawierać tytuł, podtytuł oraz awatara karty.

Oto przykład właściwości CardHeader:

Dodaj co najmniej 1 sekcję karty

Widżet CardSection to kontener wysokiego poziomu na karcie. Korzystasz z karty aby zgrupować widżety na karcie. W każdej sekcji karty możesz dodać nagłówek i co najmniej jeden widżet.

Oto przykład danych CardSection, które zawierają dwa textParagraph widżety:

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 nał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:

Dodaj kolumny

Widżet columns Wyświetla maksymalnie 2 kolumny na karcie. 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śl szerokość 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ę pierwszy:

  • 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 w kolumnie z lewą stroną.

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 u góry, u dołu lub pośrodku 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 siatkę, aby wyświetlić 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:

Aby określić miejsce w siatce wraz z obrazem, możesz określić Pole gridItemLayout. To pole pozwala określić, 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 trzykolumnowa 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 siatki lub kolumny

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.

CardFixedFooter widżet reprezentuje stopkę wiadomości dialogowej wysłanej przez aplikacji do obsługi czatu. Stopki mogą zawierać przyciski główne i dodatkowe.

Widżet CardFixedFooter jest dostępny tylko dla okna dialogowe.

Poniżej znajdziesz przykład widżetu CardFixedFooter z 2 przyciskami:

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