Jetpack Compose Academy · Lekcja

Scaffold: szkielet ekranu

Skonfiguruj standardowe obszary układu aplikacji

Lekcja 1 z 413 kroki

Scaffold: szkielet ekranu 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.

Poznaj Scaffold

Większość ekranów aplikacji ma ten sam szkielet: pasek u góry, treść pośrodku i czasem przycisk unoszący się niżej. Scaffold udostępnia to wszystko w jednym Composable. 🏗️

Dlaczego nie zwykły Column?

Można ręcznie zbudować paski za pomocą Column, ale za każdym razem trzeba ponownie rozwiązywać kwestie wcięć, odstępów i nakładania się elementów. Scaffold łączy te standardowe elementy za Pana/Panią.

Idea slotów

Scaffold korzysta z slotów: nazwanych miejsc, w których umieszcza się Composable. Wypełnia Pan/Pani wybrane sloty, a pozostałe zostawia puste.

Slot content

Slotem używanym niemal zawsze jest content. Zawiera główną treść ekranu, a Scaffold przekazuje mu odpowiednie wewnętrzne wypełnienie.

Scaffold { innerPadding ->
    Text("Hello", Modifier.padding(innerPadding))
}

Uwzględnianie innerPadding

Wartość innerPadding chroni treść przed ukryciem pod paskami. Zawsze należy zastosować ją do treści najwyższego poziomu, inaczej tekst może znaleźć się pod paskiem aplikacji.

Slot topBar

Po umieszczeniu paska w slocie topBar Scaffold przypina go u góry, a następnie zmniejsza obszar treści, aby elementy się nie nakładały.

Scaffold(
    topBar = { TopAppBar(title = { Text("Home") }) }
) { padding -> }

Dostępne dodatkowe sloty

Scaffold udostępnia również sloty bottomBar, floatingActionButton i snackbarHost. Każdy z nich pozna Pan/Pani w tym kursie.

Pozostawianie slotów pustych

Każdy slot jest opcjonalny. Scaffold zawierający wyłącznie content jest całkowicie poprawny, dlatego paski należy dodawać tylko wtedy, gdy ekran rzeczywiście ich potrzebuje.

Jeden Scaffold na ekran

Zwykle obowiązuje zasada: jeden Scaffold na ekran. Obejmuje on cały ekran, a mniejsze Composable wypełniają jego slot content.

Scaffold należy do Material 3

Należy zaimportować Scaffold z androidx.compose.material3, aby jego kolory i odstępy pasowały do reszty motywu Material You.

import androidx.compose.material3.Scaffold

containerColor

Ustawia Pan/Pani containerColor, aby pokolorować tło ekranu znajdujące się za wszystkimi slotami. Jeśli ta wartość zostanie pominięta, Scaffold domyślnie użyje koloru surface z motywu.

Szybkie sprawdzenie

Co najbezpieczniej zrobić z wartością, którą Scaffold przekazuje do lambdy content?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Scaffold to szkielet ekranu: należy wypełniać nazwane sloty, takie jak content i topBar, uwzględniać innerPadding i używać jednego Scaffold na ekran. Następnie zajmie się Pan/Pani stylem górnego paska. 👍

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 „Scaffold: szkielet ekranu” jest bezpłatna?

Tak — pełny tekst „Scaffold: szkielet ekranu” 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 „Scaffold: szkielet ekranu”?

Skonfiguruj standardowe obszary układu aplikacji Ć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 „Scaffold: szkielet ekranu”?

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