Na tej stronie objaśniamy, jak formatować i porządkować widżety w formie karty lub komunikatu dialogowego.
Za pomocą Kreatora kart możesz projektować karty JSON i wyświetlać ich podgląd na potrzeby aplikacji Google Chat:
Otwórz kreator kartWymagania wstępne
Wyświetl karty i okna w kolumnach
Widżet columns
wyświetla maksymalnie 2 kolumny na karcie lub w oknie. Do każdej kolumny możesz dodawać widżety, które wyświetlają się w określonej kolejności.
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 jej wyższej kolumny. Jeśli np. pierwsza kolumna jest wyższa od drugiej, obie kolumny mają wysokość pierwszej kolumny. Każda kolumna może zawierać różną liczbę widżetów, więc nie możesz definiować wierszy ani wyrównywać widżetów między kolumnami.
Poniższy przykład pokazuje kartę z widżetem columns
z 2 kolumnami tekstu. Aby wyświetlić tylko układ kolumn i zwinąć przykładowy kod, kliknij Zwiń.
Przy ograniczeniu miejsca, jak w przykładzie poniżej, druga kolumna zawija się pod pierwszą kolumną.
Zdefiniuj szerokość kolumny
Kolumny są wyświetlane obok siebie. Szerokość każdej kolumny możesz dostosować za pomocą pola horizontalSizeStyle
.
Jeśli szerokość ekranu użytkownika jest zbyt mała, druga kolumna zawija się pod pierwszą:
- W witrynach na komputery druga kolumna zawija się, gdy szerokość ekranu jest mniejsza niż lub równa 480 pikseli.
- Na urządzeniach z iOS druga kolumna zawija się, gdy szerokość ekranu jest mniejsza lub równa 300 punktów.
- Na urządzeniach z Androidem druga kolumna zawija się, gdy szerokość ekranu jest mniejsza niż lub równa 320 dp.
Poniższy przykład pokazuje kartę z widżetem columns
, który zawiera 2 kolumny tekstu i 4 elementy w kolumnach. Do każdego elementu w kolumnach zastosowano właściwości horizontalSizeStyle
, które pozwalają określić, jak dużo miejsca ma tekst w każdej kolumnie:
- Pierwszy akapit tekstu wykorzystuje
FILL_MINIMUM_SPACE
, aby wypełnić nie więcej niż 30% szerokości kart. - Drugi akapit wykorzystuje
FILL_AVAILABLE_SPACE
, aby wypełnić dostępne miejsce o szerokości karty. W tym przykładzie zajmuje ona 70% szerokości karty. - Trzeci akapit tekstu nie definiuje
horizontalSizeStyle
, więc domyślnie zajmuje całe dostępne miejsce na karcie. - Czwarty akapit tekstu wykorzystuje
FILL_MINIMUM_SPACE
, by wypełnić nie więcej niż 30% szerokości kart.
Definiowanie wyrównania kolumny
Możesz wyrównać widżety w poziomie do lewej, prawej lub do środka kolumny, definiując pole horizontalAligment
.
Jeśli plik horizontalAlignment
jest niezdefiniowany, widżety zostaną wyrównane do lewej strony w kolumnie.
W tym przykładzie pokazujemy, jak wyrównać tekst w kolumnie do lewej w poziomie:
W tym przykładzie tekst wyrównuje tekst w poziomie do środka:
W tym przykładzie tekst wyrównuje tekst w kolumnie do prawej w poziomie:
Definiowanie wyrównania kolumny w pionie
Określając pole verticalAlignment
, możesz wyrównywać widżety w pionie do górnej, dolnej lub do środka kolumny.
Jeśli pole verticalAlignment
jest nieokreślone, widżety w kolumnie są wyrównywane do góry.
W tym przykładzie pokazujemy, jak wyrównać tekst w pionie do góry ekranu:
W tym przykładzie pokazujemy wyrównanie tekstu do środka kolumny w pionie:
Ten przykład pokazuje wyrównanie tekstu w pionie w kolumnie u dołu:
Dodawanie poziomego separatora między widżetami
Widżet divider
wyświetla poziomą linię rozdzielającą szerokość karty między widżetami ułożonymi w pionie. Linia jest wizualnym separatorem, który pomaga użytkownikom odróżnić widżet od drugiego, ułatwiając przeglądanie i rozumienie kart.
Poniżej znajdziesz kartę składającą się z widżetu divider
między innymi typami widżetów:
Wyświetl siatkę 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 liczbę elementów podzieloną przez kolumny.
Siatka zawierająca 10 elementów i 2 kolumny ma 5 wierszy. Siatka zawierająca 11 elementów
i 2 kolumny ma 6 wierszy.
Widżet obsługuje sugestie, które ułatwiają użytkownikom wprowadzanie jednolitych danych i działania związane ze zmianą, czyli Actions
uruchamiane, gdy w polu wprowadzania zmiany nastąpi zmiana. Przykładem może być dodanie lub usunięcie tekstu przez użytkownika.
Oto przykład siatki z 2 kolumnami i 1 elementem:
Określ, gdzie w siatce ma pojawiać się tekst z obrazem
W polu gridItemLayout
możesz określić, czy tekst ma pojawiać się nad czy pod elementem w siatce (gridItem
). Jeśli gridItemLayout
jest niezdefiniowany, tekst domyślnie wyświetla się pod elementem w siatce
Poniższy przykład to siatka z 3 kolumnami z tekstem i obrazem w każdej z nich. Pierwsza siatka określa tekst, który pojawi się nad obrazem, druga siatka określa tekst, który pojawi się pod obrazem, a trzecia siatka nie określa jego pozycji.
Dodawanie obramowania do elementów interfejsu
W przypadku elementów wyświetlanych w widżecie column
lub grid
możesz dodać obramowanie tych elementów interfejsu, definiując pola borderType
i borderStyle
.
Jeśli nie zdefiniowano pola borderStyle
, domyślnie nie ma obramowania. Możesz zdefiniować borderType
, który będzie stosowany do wszystkich elementów w widżecie, lub zastosować styl do poszczególnych elementów w widżecie.
Poniższy przykład to siatka z 2 kolumnami i obraz w każdej siatce, w której określono typ, styl i kolor obramowania, który ma zastosowanie do wszystkich elementów w siatce.
Poniższy przykład to siatka z 3 kolumnami z obrazem w każdej siatce oraz indywidualnie zdefiniowanym stylem i typem obramowania. Obramowanie pierwszego obrazu jest zdefiniowane jako STROKE
. Obramowanie drugiego obrazu jest zdefiniowane jako NO_BORDER
. Trzeci obraz nie ma zdefiniowanego obramowania.
Rozwiązywanie problemów
Gdy aplikacja lub karta Google Chat zwróci błąd, w interfejsie Google Chat pojawi się komunikat „Coś poszło nie tak”. lub „Nie można przetworzyć żądania”. Czasami w interfejsie Google Chat nie pojawia się żaden komunikat o błędzie, ale aplikacja lub karta Google Chat zwraca nieoczekiwany wynik, na przykład komunikat na karcie może się nie pojawić.
Mimo że komunikat o błędzie może nie wyświetlać się w interfejsie Google Chat, dostępne są opisowe komunikaty o błędach i dane dziennika, które pomogą Ci naprawić błędy występujące po włączeniu logowania błędów w aplikacjach Google Chat. Informacje o wyświetlaniu, debugowaniu i naprawianiu błędów znajdziesz w artykule Rozwiązywanie problemów z Google Chat i ich naprawianie.
Powiązane artykuły
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType