TabRow i strony przesuwane gestem
Dodaj poziome karty ze stronicowaniem
TabRow i strony przesuwane gestem 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.
Poznaj TabRow
NavigationBar znajduje się na dole, natomiast TabRow umieszcza rząd kart u góry — idealnie nadaje się do przełączania między powiązanymi widokami na jednym ekranie. 🗂️
TabRow a NavigationBar
Użyj TabRow dla sekcji wewnątrz ekranu, takich jak Posts i About, a NavigationBar dla miejsc docelowych obejmujących całą aplikację. Różne zadania, różne paski.
Dodaj karty
TabRow przyjmuje selectedTabIndex oraz lambdę content, w której generujesz po jednym elemencie Tab dla każdej sekcji.
TabRow(selectedTabIndex = index) {
Tab(/* ... */)
Tab(/* ... */)
}Każda karta jest wybieralna
Każdy element Tab ma własne flagi selected i onClick oraz tekst lub ikonę, podobnie jak NavigationBarItem.
Tab(
selected = index == 0,
onClick = { index = 0 },
text = { Text("Posts") }
)Umożliw przewijanie stron
Aby przełączać strony gestem przesunięcia, połącz karty z elementem HorizontalPager, który wyświetla jedną stronę na całą szerokość naraz.
val pagerState = rememberPagerState { 3 }
HorizontalPager(state = pagerState) { page -> }Jeden stan, dwa widoki
Kluczem jest współdzielenie pagerState. TabRow odczytuje z niego bieżącą stronę, a pager zmienia tę stronę, gdy użytkownik przesuwa ekran.
TabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Dotknięcie powinno przewijać pager
Po dotknięciu karty wywołaj animateScrollToPage, aby pager płynnie przewinął się do odpowiedniej strony.
scope.launch {
pagerState.animateScrollToPage(i)
}Uruchom w zakresie
Ponieważ animateScrollToPage jest funkcją zawieszającą, uruchom ją z użyciem rememberCoroutineScope wewnątrz onClick.
val scope = rememberCoroutineScope()Przewijane karty
Masz wiele kart? Użyj ScrollableTabRow, aby można je było przewijać poziomo zamiast upychać je na szerokości ekranu.
ScrollableTabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Dostosuj wskaźnik
Przesuwane podkreślenie znajduje się w slocie indicator. Możesz zmienić jego kolor lub rozmiar, aby pasował do motywu i identyfikacji wizualnej aplikacji.
indicator = { tabPositions -> /* custom underline */ }Wzorzec pagera i kart
Połączenie TabRow i HorizontalPager za pomocą jednego współdzielonego stanu to standardowy wzorzec Compose dla ekranów z kartami przewijanych gestem.
Szybkie sprawdzenie
Zbudowano strony z kartami przewijane gestem. Ostatnie sprawdzenie!
Podsumowanie
Opanowałeś TabRow z HorizontalPager: współdzielony pagerState łączy oba elementy, animateScrollToPage obsługuje dotknięcia, a ScrollableTabRow mieści wiele kart. Kurs ukończony! 🚀
Często zadawane pytania
Czy lekcja „TabRow i strony przesuwane gestem” jest bezpłatna?
Tak — pełny tekst „TabRow i strony przesuwane gestem” 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 „TabRow i strony przesuwane gestem”?
Dodaj poziome karty ze stronicowaniem Ć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 „TabRow i strony przesuwane gestem”?
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
- NavigationBar z wieloma kartami
- Wyróżnianie wybranej trasy
- Zachowywanie stanu kart podczas przełączania
- TabRow i strony przesuwane gestem