Android Academy · Lekcja

Odstępy za pomocą Padding

Użyje Pan/Pani Modifier do ustawiania odstępów.

Odstępy za pomocą Padding to bezpłatna lekcja Android 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 Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Czym jest Padding?

Padding to pusta przestrzeń dodawana wokół zawartości composable. Odsuwa zawartość od krawędzi, dzięki czemu elementy nie wyglądają na stłoczone.

W Compose dodajesz padding za pomocą Modifier.

Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
)

Jednostka dp

Rozmiary paddingu są wyrażane w dp, czyli pikselach niezależnych od gęstości ekranu. dp ma taki sam fizyczny rozmiar na każdym ekranie.

Wpisz liczbę, a następnie .dp, na przykład 8.dp lub 24.dp.

Modifier.padding(8.dp)

Czym jest Modifier?

Modifier opisuje wygląd i działanie composable: jego rozmiar, padding, tło i inne właściwości.

Modyfikatory tworzysz, łącząc funkcje kropkami.

Modifier
    .padding(16.dp)
    .background(Color.Yellow)

Padding ze wszystkich stron

Wywołanie padding(16.dp) z jedną wartością dodaje taką samą przestrzeń ze wszystkich czterech stron: od góry, od dołu, od początku i od końca.

To najszybszy sposób, aby zapewnić zawartości trochę przestrzeni.

Box(
    modifier = Modifier.padding(16.dp)
) {
    Text("Inside")
}

Poziomy i pionowy padding

Możesz ustawić strony osobno za pomocą parametrów horizontal i vertical.

Horizontal obejmuje początek i koniec, a vertical — górę i dół.

Modifier.padding(
    horizontal = 24.dp,
    vertical = 8.dp
)

Padding z jednej strony

Aby wskazać pojedynczą krawędź, podaj jej nazwę: start, top, end lub bottom.

Pozwala to precyzyjnie dopasować odstępy dokładnie tam, gdzie są potrzebne.

Modifier.padding(
    start = 16.dp,
    top = 4.dp
)

Kolejność ma znaczenie

Kolejność modyfikatorów zmienia rezultat. Umieszczenie paddingu przed tłem pozostawia obszar paddingu bez tła, a umieszczenie go za tłem powoduje wypełnienie tłem także tego obszaru.

Czytaj modyfikatory od góry do dołu, jak warstwy.

Modifier
    .background(Color.Cyan)
    .padding(16.dp)

Odstępy między elementami

Wewnątrz Column lub Row użyj Arrangement.spacedBy, aby automatycznie dodać równe odstępy między elementami podrzędnymi.

To czytelniejsze rozwiązanie niż ręczne dodawanie paddingu do każdego elementu.

Column(
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    Text("One")
    Text("Two")
}

Spacer do tworzenia odstępów

Spacer to pusty composable używany do rozsuwania elementów. Nadaj mu rozmiar za pomocą Modifier.

Przydaje się do utworzenia stałego odstępu między dwoma elementami.

Column {
    Text("Top")
    Spacer(Modifier.height(16.dp))
    Text("Bottom")
}

Padding a margin

Compose nie ma osobnego marginesu. Zewnętrzną przestrzeń tworzysz, umieszczając padding wcześniej w łańcuchu modyfikatorów, przed size lub background.

Jedno narzędzie — padding — obsługuje więc zarówno wewnętrzne, jak i zewnętrzne odstępy, zależnie od kolejności.

Modifier
    .padding(16.dp)
    .background(Color.LightGray)
    .padding(8.dp)

Spójne odstępy

Dobre aplikacje korzystają z kilku powtarzających się wartości, takich jak 4, 8, 16 i 24 dp. Dzięki temu układy są uporządkowane i przewidywalne.

Unikaj przypadkowych liczb — wybierz niewielką skalę wartości.

Modifier.padding(16.dp)

Szybkie sprawdzenie

Sprawdź swoją wiedzę o paddingu.

Podsumowanie

Padding dodaje przestrzeń wokół zawartości za pomocą Modifier.padding i wartości dp. Możesz dodać padding ze wszystkich stron, poziomo lub pionowo, albo tylko przy pojedynczych krawędziach.

Kolejność modyfikatorów ma znaczenie, a Arrangement.spacedBy lub Spacer służą do obsługi odstępów między elementami.

Teraz poznasz kolory i MaterialTheme.

Często zadawane pytania

Czy lekcja „Odstępy za pomocą Padding” jest bezpłatna?

Tak — pełny tekst „Odstępy za pomocą Padding” 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 Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Odstępy za pomocą Padding”?

Użyje Pan/Pani Modifier do ustawiania odstępów. Ćwiczysz Android 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ąć Android Academy?

Nie wymagamy żadnego doświadczenia. Android 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 „Odstępy za pomocą Padding”?

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 Android Academy?

Tak. Każda lekcja Android 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 Android Academy