Kotlin Multiplatform Academy · レッスン

Layouts、Modifiers、Theming

Materialで適応型の共有画面を構築します

「Layouts、Modifiers、Theming」はCoddyKit上の無料Kotlin Multiplatform Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これは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. 🎨

よくある質問

「Layouts、Modifiers、Theming」レッスンは無料ですか？

はい。「Layouts、Modifiers、Theming」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Kotlin Multiplatform Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Kotlin Multiplatform Academyコースには全4レッスンが含まれています。

「Layouts、Modifiers、Theming」で何を学びますか？

Materialで適応型の共有画面を構築しますブラウザで直接実行するハンズオンコードでKotlin Multiplatform Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Kotlin Multiplatform Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのKotlin Multiplatform Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「Layouts、Modifiers、Theming」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このKotlin Multiplatform Academyレッスンでコードを書いて実行できますか？

はい。すべてのKotlin Multiplatform Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Kotlin Multiplatform Academyに戻る