0Pricing
Jetpack Compose Academy · Lekcja

NavigationBar z wieloma kartami

Przełączaj główne sekcje na dole ekranu

NavigationBar z wieloma kartami to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 1 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.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Meet NavigationBar

Material 3 gives you NavigationBar, a bar pinned to the bottom that lets people jump between the top-level sections of your app. 📱

When to Use It

Reach for a NavigationBar when your app has three to five equally important destinations, like Home, Search, and Profile.

It Lives in the Scaffold

You usually drop the bar into a Scaffold bottomBar slot, so it stays fixed while the screen content scrolls above it.

Scaffold(
  bottomBar = { NavigationBar { /* items */ } }
) { padding -> Content(padding) }

Each Tab Is an Item

Inside the bar you add one NavigationBarItem per destination. Each item is a clickable tab with its own icon and label.

NavigationBar {
  NavigationBarItem(/* ... */)
  NavigationBarItem(/* ... */)
}

The selected Flag

Every item needs a selected boolean. Exactly one item should be true at a time so the bar shows where the user is.

NavigationBarItem(
  selected = current == "home",
  onClick = { go("home") }
)

Handle the Tap

The onClick lambda runs when the tab is pressed. This is where you tell your navigation to switch to that section.

Give It an Icon

The icon slot takes a Composable, usually an Icon from the Material set, so each tab is instantly recognizable.

icon = { Icon(Icons.Default.Home, contentDescription = "Home") }

Add a Label

The label slot shows short text under the icon. Keep it to one clear word so it fits and reads fast.

label = { Text("Home") }

A Model for Tabs

It helps to keep your tabs in a simple data class list, so the bar can loop over them instead of hard-coding each item.

data class Tab(val route: String, val icon: ImageVector, val label: String)

Loop to Build the Bar

With a tab list you can forEach over it and emit one NavigationBarItem per entry, keeping the bar tidy and easy to extend.

tabs.forEach { tab ->
  NavigationBarItem(/* uses tab fields */)
}

Pair It with Content

The bar only switches the active section. You still pair it with a NavHost or a when block that actually swaps the screen content.

Quick Check

You added three tabs to your NavigationBar. Quick check on the basics.

Recap

You met NavigationBar: drop it in the Scaffold, add a NavigationBarItem per section with an icon, label, selected flag, and onClick. Nice work! 🎉

Często zadawane pytania

Czy lekcja „NavigationBar z wieloma kartami” jest bezpłatna?

Tak — pełny tekst „NavigationBar z wieloma kartami” 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 „NavigationBar z wieloma kartami”?

Przełączaj główne sekcje na dole ekranu Ć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 1 z 4.

Ile czasu zajmuje lekcja „NavigationBar z wieloma kartami”?

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. NavigationBar z wieloma kartami
  2. Wyróżnianie wybranej trasy
  3. Zachowywanie stanu kart podczas przełączania
  4. TabRow i strony przesuwane gestem
← Powrót do Jetpack Compose Academy