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 kartWymagania 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ć:
- Usługa HTTP z Google Cloud Functions.
- Skrypt Google Apps Script
- Google Cloud Dialogflow CX,
- Google Cloud Pub/Sub
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
Powiązane artykuły
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType