Jetpack Compose Academy · Lekcja

Przyklejane nagłówki i listy sekcji

Grupuj elementy za pomocą przypiętych nagłówków

Lekcja 4 z 413 kroki

Przyklejane nagłówki i listy sekcji to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 4 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.

Listy często mają sekcje

Rzeczywiste listy grupują dane, na przykład kontakty według liter lub wiadomości według dat. Każda grupa zasługuje na wyraźny header nad swoimi wierszami.

Header to po prostu item

Najprostszy header to pojedynczy blok item zawierający odpowiednio ostylowany Text. Należy umieścić go przed elementami grupy, aby przewijał się razem z nimi.

item { Text("A", style = MaterialTheme.typography.titleMedium) }

Budowanie sekcji w pętli

Należy przejść w pętli po pogrupowanych danych i dla każdej grupy dodać jej item nagłówka, a następnie items. W ten sposób powstaje przejrzysta lista sekcji.

groups.forEach { (letter, names) ->
    item { Text(letter) }
    items(names) { Text(it) }
}

Problem: nagłówki znikają podczas przewijania

Zwykły nagłówek przewija się poza górną krawędź razem ze swoimi wierszami. W połowie sekcji łatwo stracić orientację, którą grupę właśnie się przegląda.

Poznaj sticky headers

stickyHeader przypina się do góry, gdy jego sekcja przewija się pod nim. Etykieta bieżącej grupy pozostaje widoczna. 📌

stickyHeader { Text("A") }

Używaj go tak jak item

Wywołuj stickyHeader dokładnie w miejscu, w którym umieściłby Pan item nagłówka, tuż przed blokiem items sekcji. Compose zajmie się przypinaniem.

groups.forEach { (letter, names) ->
    stickyHeader { Text(letter) }
    items(names) { Text(it) }
}

Jeden nagłówek naraz

Gdy nowa sekcja dociera do góry, jej nagłówek wypycha poprzedni w górę i poza ekran. Przypięty pozostaje tylko nagłówek bieżącej grupy.

Nagłówki potrzebują tła

Sticky header powinien mieć jednolite background. Bez niego przewijane wiersze będą przez niego widoczne, a przypięty tekst stanie się trudny do odczytania.

stickyHeader {
    Text(letter, Modifier.background(Color.White).fillMaxWidth())
}

Najpierw pogrupuj dane

Przed rozpoczęciem kompozycji należy przygotować strukturę grup, często za pomocą groupBy. Czyste dane sprawiają, że pętla sekcji jest krótka i czytelna.

val byLetter = names.groupBy { it.first() }

Sticky headers działają w LazyColumn

Mechanizm stickyHeader jest częścią zakresu LazyColumn. Działa tylko wewnątrz leniwej listy, a nie w zwykłym Column.

Dopracowane, łatwe do przeglądania listy

Połączenie nagłówków sekcji i przypinania zamienia długą, płaską listę w łatwy do przeglądania, profesjonalny ekran, po którym użytkownicy mogą szybko się poruszać.

Szybkie sprawdzenie

Co robi sticky header?

Odpowiedz w interaktywnej lekcji

Podsumowanie: nagłówki, które pozostają na miejscu

Sekcje buduje się, łącząc nagłówek z elementami items, a następnie zamieniając go na stickyHeader, aby etykieta grupy pozostawała przypięta podczas przewijania. Należy dodać tło! 🎉

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

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Przyklejane nagłówki i listy sekcji” jest bezpłatna?

Tak — pełny tekst „Przyklejane nagłówki i listy sekcji” 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 „Przyklejane nagłówki i listy sekcji”?

Grupuj elementy za pomocą przypiętych nagłówków Ć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 4 z 4.

Ile czasu zajmuje lekcja „Przyklejane nagłówki i listy sekcji”?

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

← Powrót do Jetpack Compose Academy