0Pricing
Kotlin Multiplatform Academy · Lekcja

Układy, modyfikatory i motywy

Budowanie adaptacyjnych współdzielonych ekranów za pomocą Material

Układy, modyfikatory i motywy to bezpłatna lekcja Kotlin Multiplatform 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 Kotlin Multiplatform Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Kotlin Multiplatform Academy zawiera 4 lekcji w sumie.

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

Three Layout Building Blocks

Almost every screen is built from Column, Row and Box. Column stacks children vertically, Row places them side by side, Box layers them.

Column {
    Text("Top")
    Text("Bottom")
}

Rows Place Items Side by Side

A Row arranges its children horizontally. Reach for it when you want a label and a value, or an icon next to text, on one line.

Row {
    Text("Price:")
    Text("$9")
}

Box for Stacking

A Box overlaps its children on the same spot. It is perfect for a badge on top of an avatar or text centered over an image.

Box {
    Image(painter, null)
    Text("New")
}

Modifiers Shape Everything

A Modifier adjusts size, spacing, background and more. You chain calls in order, and the order genuinely changes the result.

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

Order Matters in Chains

Modifiers apply top to bottom. Padding before background insets the color, while background before padding fills behind the padding. Read them like steps.

Modifier
    .background(Blue)
    .padding(8.dp)

Fill and Size the Space

Use fillMaxWidth, fillMaxSize or fixed size to control how much room a composable claims inside its parent layout.

Column(Modifier.fillMaxSize()) {
    Text("Stretched")
}

Arrangement and Alignment

Layout parameters like Arrangement and Alignment position children, for example centering a Row or spacing items evenly across it.

Row(
    horizontalArrangement = Arrangement.SpaceBetween
) { }

Theming with MaterialTheme

Wrap your app in MaterialTheme to supply a color scheme, typography and shapes. Every Material component reads from it automatically.

MaterialTheme(colorScheme = darkColorScheme()) {
    App()
}

Read Theme Values Anywhere

Inside the theme you access tokens through MaterialTheme.colorScheme and typography, so your styling stays consistent across every shared screen.

Text(
    "Title",
    color = MaterialTheme.colorScheme.primary
)

Adapt to Each Platform

The same layout code runs everywhere, yet you can branch on size or platform to make screens adaptive for phones, tablets and desktops.

Consistent by Default

Because layouts, modifiers and theming are all shared, your Android and iOS screens look the same without anyone duplicating styling work.

Quick Check

What does a Modifier do?

Recap: Layout, Modify, Theme

You stacked UI with Column, Row and Box, shaped it with chained modifiers, and applied a shared MaterialTheme so every platform stays consistent. 🎨

Często zadawane pytania

Czy lekcja „Układy, modyfikatory i motywy” jest bezpłatna?

Tak — pełny tekst „Układy, modyfikatory i motywy” 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 Kotlin Multiplatform Academy, przejdź na CoddyKit PRO. Kurs Kotlin Multiplatform Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Układy, modyfikatory i motywy”?

Budowanie adaptacyjnych współdzielonych ekranów za pomocą Material Ćwiczysz Kotlin Multiplatform 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ąć Kotlin Multiplatform Academy?

Nie wymagamy żadnego doświadczenia. Kotlin Multiplatform 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 „Układy, modyfikatory i motywy”?

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 Kotlin Multiplatform Academy?

Tak. Każda lekcja Kotlin Multiplatform 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. Włączanie Compose Multiplatform
  2. Układy, modyfikatory i motywy
  3. Stan i rekompozycja we współdzielonym interfejsie
  4. Osadzanie współdzielonego interfejsu na iOS i Desktop
← Powrót do Kotlin Multiplatform Academy