Tworzenie niestandardowego systemu projektowego
Rozszerz motyw o własne tokeny
Tworzenie niestandardowego systemu projektowego 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.
Poza wartościami domyślnymi
Prawdziwe marki potrzebują czegoś więcej niż wbudowane elementy Material. System projektowy łączy kolory, typografię, kształty i dodatkowe tokeny w jeden wielokrotnego użytku motyw. 🏗️
Opakowanie MaterialTheme
Na początku należy napisać własny element Composable AppTheme, który konfiguruje MaterialTheme i zapewnia całej aplikacji jeden nazwany punkt wejścia.
@Composable
fun AppTheme(content: @Composable () -> Unit) { /* ... */ }Przekazywanie własnych tokenów
Wewnątrz AppTheme przekazuje się do MaterialTheme własne colorScheme, typography i shapes, dzięki czemu każdy ekran automatycznie dziedziczy markę.
MaterialTheme(
colorScheme = brandColors,
typography = brandType,
shapes = brandShapes
) { content() }Material nie zawiera wszystkich tokenów
Niektóre wartości marki, takie jak zieleń oznaczająca powodzenie lub własna jednostka odstępów, nie mają odpowiedniej roli Material. Należy dodać je jako własne dodatkowe tokeny.
Przechowywanie dodatkowych kolorów
Dodatkowe kolory można zgrupować w niewielkiej klasie danych — uporządkowanym miejscu na wartości marki, których Material nie udostępnia standardowo.
data class BrandColors(
val success: Color,
val warning: Color
)CompositionLocal
Aby udostępniać niestandardowe tokeny w dół drzewa bez przekazywania parametrów, używa Pan/Pani CompositionLocal — wbudowanego w Compose mechanizmu wartości ambient.
Tworzenie obiektu Local
Deklaruje Pan/Pani staticCompositionLocalOf z wartością domyślną, tworząc kanał, z którego dowolny Composable może odczytywać kolory marki.
val LocalBrand = staticCompositionLocalOf { defaultBrand }Udostępnianie wartości
W AppTheme opakowuje Pan/Pani zawartość w CompositionLocalProvider, przekazując tokeny marki do drzewa razem z MaterialTheme.
CompositionLocalProvider(LocalBrand provides brand) {
MaterialTheme(/* ... */) { content() }
}Odczytywanie niestandardowych tokenów
Dowolny Composable znajdujący się niżej może odczytać LocalBrand.current, aby pobrać niestandardowe wartości — podobnie jak MaterialTheme udostępnia własne.
val success = LocalBrand.current.successUdostępnianie przejrzystego API
Wiele zespołów udostępnia obiekt, aby wywołania wyglądały jak AppTheme.brand.success — to przyjazna nakładka na znajdujący się pod spodem CompositionLocal.
Jedno źródło prawdy
Od tej pory kolory, typografia, kształty i niestandardowe tokeny pochodzą z jednego motywu, dzięki czemu aplikacja pozostaje spójna i łatwo ją rozwijać. ✨
Szybkie sprawdzenie
Potrzebuje Pan/Pani koloru marki, dla którego Material nie ma odpowiedniej roli, a który ma być współdzielony w całej aplikacji. Po co sięgnąć?
Podsumowanie: własny motyw
Opakował(a) Pan/Pani MaterialTheme w AppTheme, dodał(a) dodatkowe tokeny za pomocą CompositionLocal i zapewnił(a) aplikacji jedno źródło prawdy dotyczące marki. 🎉
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 „Tworzenie niestandardowego systemu projektowego” jest bezpłatna?
Tak — pełny tekst „Tworzenie niestandardowego systemu projektowego” 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 „Tworzenie niestandardowego systemu projektowego”?
Rozszerz motyw o własne tokeny Ć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 „Tworzenie niestandardowego systemu projektowego”?
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
- MaterialTheme i schematy kolorów
- Typografia i tokeny kształtów
- Tryb ciemny i dynamiczny kolor
- Tworzenie niestandardowego systemu projektowego