Sformatuj strukturę karty lub okna

Na tej stronie objaśniamy, jak formatować i porządkować widżety w formie karty lub komunikatu dialogowego.


Projektuj karty i wyświetl ich podgląd w kreatorze kart.

Otwórz kreator kart

Wymagania wstępne

  • konto Google Workspace z dostępem do Google Chat.
  • Opublikowana aplikacja Google Chat. Aby utworzyć aplikację do obsługi Google Chat, postępuj zgodnie z tym quickstart.
  • 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, interfejs czatu wyświetli komunikat „Coś poszło nie tak” lub „Nie udało się przetworzyć Twojej prośby”. 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 do obsługi czatu. Informacje o wyświetlaniu, debugowaniu i naprawianiu błędów znajdziesz w artykule Rozwiązywanie problemów z Google Chat i ich naprawianie.