0Pricing
Kotlin Multiplatform Academy · Урок

Макеты, модификаторы и оформление

Создавайте адаптивные общие экраны с Material

«Макеты, модификаторы и оформление» — бесплатный урок Kotlin Multiplatform Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Kotlin Multiplatform Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Kotlin Multiplatform Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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. 🎨

Часто задаваемые вопросы

Урок «Макеты, модификаторы и оформление» бесплатный?

Да — полный текст урока «Макеты, модификаторы и оформление» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Kotlin Multiplatform Academy, подпишись на CoddyKit PRO. Курс Kotlin Multiplatform Academy содержит 4 уроков всего.

Чему я научусь в уроке «Макеты, модификаторы и оформление»?

Создавайте адаптивные общие экраны с Material Ты практикуешь Kotlin Multiplatform Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Kotlin Multiplatform Academy?

Предыдущий опыт не требуется. Kotlin Multiplatform Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Макеты, модификаторы и оформление»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Kotlin Multiplatform Academy?

Да. Каждый урок Kotlin Multiplatform Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Включение Compose Multiplatform
  2. Макеты, модификаторы и оформление
  3. Состояние и рекомпозиция в общем интерфейсе
  4. Размещение общего интерфейса на iOS и Desktop
← Назад к Kotlin Multiplatform Academy