Tło, obramowanie i przycinanie
Dodawaj kolory, obrysy i zaokrąglone kształty
Tło, obramowanie i przycinanie to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 2 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.
Dekorowanie za pomocą modyfikatorów
Oprócz zmiany rozmiaru modyfikatory mogą także dekorować element Composable. Można dodać tło, narysować obramowanie i zaokrąglić narożniki. 🎨
Dodawanie tła
background wypełnia element Composable jednolitym kolorem. Kolor obejmuje cały obszar zajmowany przez element, włącznie z jego rozmiarem i wypełnieniem.
Modifier.background(Color.Blue)Używanie kolorów motywu
Lepszym wyborem niż surowe wartości są kolory motywu. Korzystanie z MaterialTheme zapewnia spójność aplikacji w trybie jasnym i ciemnym.
Modifier.background(
MaterialTheme.colorScheme.primary
)Rysowanie obramowania
Użyj border, aby obrysować element Composable. Podaj grubość w dp i kolor, a Compose narysuje krawędź za Ciebie.
Modifier.border(2.dp, Color.Gray)Poznaj kształty
Shape opisuje obrys, na przykład zaokrąglony lub okrągły. Zarówno background, jak i border przyjmują kształt, który zmienia ich sylwetkę.
Zaokrąglone narożniki
RoundedCornerShape zaokrągla narożniki za pomocą promienia podanego w dp. To podstawowy kształt kart, przycisków i chipów.
RoundedCornerShape(12.dp)Tło o określonym kształcie
Przekaż kształt do background, a kolor wypełni tylko obszar wewnątrz tego obrysu, tworząc schludny zaokrąglony panel.
Modifier.background(
Color.LightGray,
RoundedCornerShape(12.dp)
)Przycinanie zawartości
clip przycina wszystko, co zostanie narysowane poza kształtem. Użyj go, aby obrazy i elementy podrzędne respektowały zaokrąglone narożniki.
Modifier.clip(RoundedCornerShape(12.dp))Tworzenie okręgu
Użyj CircleShape, gdy potrzebujesz idealnego okręgu, na przykład dla okrągłego awatara lub pływającego przycisku.
Modifier.clip(CircleShape)Przycinanie przed rysowaniem
Umieść clip przed background, aby wypełnienie również było zaokrąglone. Kolejność w łańcuchu decyduje o tym, co zostanie przycięte.
Modifier
.clip(RoundedCornerShape(12.dp))
.background(Color.Cyan)Połączenie modyfikatorów dla karty
Połącz clip, background i border, aby w kilku wierszach utworzyć dopracowaną powierzchnię karty.
Modifier
.clip(RoundedCornerShape(16.dp))
.background(Color.White)
.border(1.dp, Color.LightGray)Szybkie sprawdzenie
Chcesz uzyskać zaokrąglone tło, którego wypełnienie również ma zaokrąglony kształt. Który modyfikator to zapewnia?
Podsumowanie
Potrafisz teraz stylizować dowolny element: background maluje jego tło, border tworzy obrys, a clip z obiektem Shape zaokrągla jego kształt. 🎉
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
Często zadawane pytania
Czy lekcja „Tło, obramowanie i przycinanie” jest bezpłatna?
Tak — pełny tekst „Tło, obramowanie i przycinanie” 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 „Tło, obramowanie i przycinanie”?
Dodawaj kolory, obrysy i zaokrąglone kształty Ć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 2 z 4.
Ile czasu zajmuje lekcja „Tło, obramowanie i przycinanie”?
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
- Padding, rozmiar i fillMaxWidth
- Tło, obramowanie i przycinanie
- Dlaczego kolejność modyfikatorów ma znaczenie
- weight i elastyczne rozmiary