Jetpack Compose Academy · Lekcja

Kolor, wyrównanie i przepełnienie

Koloruj tekst i elegancko obsługuj długą zawartość

Lekcja 3 z 413 kroki

Kolor, wyrównanie i przepełnienie to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Poza czarnym tekstem

Domyślny tekst przyjmuje kolor motywu, ale często potrzebujesz konkretnego odcienia. Compose pozwala ustawić color i z łatwością obsługiwać długą zawartość.

Koloruj za pomocą color

Przekaż color, aby zmienić kolor dowolnego elementu Text. Możesz użyć wartości Color bezpośrednio albo pobrać semantyczne kolory z MaterialTheme, aby wynik uwzględniał motyw.

Text("Error", color = Color.Red)

Preferuj kolory motywu

Kolory wpisane na stałe psują wygląd w trybie ciemnym. Używaj MaterialTheme.colorScheme, aby tekst pozostał czytelny na każdym tle.

Text("Hi", color = MaterialTheme.colorScheme.primary)

Wyrównaj tekst

Steruj wyrównaniem poziomym za pomocą textAlign. Wyśrodkuj tytuł lub wyjustuj akapit — ma to znaczenie tylko wtedy, gdy Text ma szerokość, którą może wypełnić.

Text("Centered", textAlign = TextAlign.Center)

Wyrównanie wymaga szerokości

Aby textAlign zadziałało, Text musi być szerszy niż zawarte w nim słowa, zwykle dzięki fillMaxWidth. W przeciwnym razie dopasowuje się do tekstu i nic się nie przesuwa.

Text("Hi", modifier = Modifier.fillMaxWidth(),
     textAlign = TextAlign.Center)

Problem z przepełnieniem

Rzeczywiste dane mogą być dłuższe niż dostępne miejsce. Bez odpowiedniego rozwiązania tekst może rozepchnąć układ albo zostać nieestetycznie ucięty. Obsługa Overflow rozwiązuje ten problem.

Ogranicz za pomocą maxLines

Ogranicz wysokość, ustawiając maxLines. Tekst narysuje najwyżej określoną liczbę wierszy i po cichu zakończy wyświetlanie, dzięki czemu wiersze zachowają przewidywalny rozmiar.

Text(longBio, maxLines = 2)

Pokaż wielokropek

Połącz maxLines z overflow = TextOverflow.Ellipsis, aby zakończyć tekst trzema kropkami i zasygnalizować, że do przeczytania jest więcej treści.

Text(longBio, maxLines = 1,
     overflow = TextOverflow.Ellipsis)

Inne tryby przepełnienia

TextOverflow oferuje także Clip, który po prostu ucina tekst na krawędzi, oraz Visible, który pozwala mu wystawać poza obszar. Ellipsis to najbardziej przyjazna opcja domyślna. 🙂

Minimalna liczba wierszy zapewnia stabilność

Użyj minLines, aby zarezerwować miejsce i zapobiec zmianie wysokości karty, gdy jeden element listy ma krótszy tekst niż inny.

Text(caption, minLines = 2, maxLines = 2)

Dopracowany i przewidywalny tekst

Kolor ułatwia zrozumienie znaczenia, wyrównanie prowadzi wzrok, a reguły overflow utrzymują stabilny układ niezależnie od długości rzeczywistych danych.

Szybkie sprawdzenie

Chcesz uzyskać jednoliniową etykietę, która przy zbyt dużej długości kończy się trzema kropkami. Co należy ustawić?

Podsumowanie

Nauczyłeś się zmieniać kolor tekstu za pomocą color, ustawiać jego położenie przy użyciu textAlign oraz kontrolować długą treść za pomocą maxLines i overflow. Układy pozostają uporządkowane. ✨

Bezpłatny start

Ucz się Kotlin dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
30
Lekcje
120

Często zadawane pytania

Czy lekcja „Kolor, wyrównanie i przepełnienie” jest bezpłatna?

Tak — pełny tekst „Kolor, wyrównanie i przepełnienie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Kolor, wyrównanie i przepełnienie”?

Koloruj tekst i elegancko obsługuj długą zawartość Ćwiczysz Jetpack Compose Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Jetpack Compose Academy?

Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Kolor, wyrównanie i przepełnienie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Jetpack Compose Academy?

Tak. Każda lekcja Jetpack Compose Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Composable Text
  2. Rozmiar, grubość i styl czcionki
  3. Kolor, wyrównanie i przepełnienie
  4. AnnotatedString: formatowany tekst mieszany
← Powrót do Jetpack Compose Academy