Jetpack Compose Academy · レッスン

Column：縦に積み重ねる

子要素を上から下へ配置します。

「Column：縦に積み重ねる」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Stacking Vertically

When you want children to sit top to bottom, you reach for Column. It is Compose's go-to layout for vertical stacks. 📚

Your First Column

A Column takes a trailing lambda. Every Composable you call inside it becomes a child, drawn in the order you write them.

Column {
    Text("First")
    Text("Second")
}

Order Is Top to Bottom

Children stack in source order. The first Composable sits at the top, the next below it, and so on down the screen.

Mixing Different Children

A Column can hold any Composables, not just Text. Buttons, Images, and even other Columns all stack happily inside it.

Column {
    Text("Title")
    Button(onClick = {}) { Text("Go") }
}

Default Sizing: Wrap Content

By default a Column is only as tall and wide as its children need. It shrinks to wrap its content unless you tell it otherwise.

Filling the Width

Add a Modifier to change size. fillMaxWidth makes the Column stretch across the whole screen horizontally.

Column(modifier = Modifier.fillMaxWidth()) {
    Text("Wide column")
}

Spacing Between Children

Use verticalArrangement with spacedBy to put even gaps between every child. No manual padding on each item needed.

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("A")
    Text("B")
}

Aligning Children Sideways

Set horizontalAlignment to line children up. CenterHorizontally pulls them all to the middle of the Column's width.

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("Centered")
}

Columns Don't Scroll Yet

A plain Column does not scroll. If children run past the screen they get clipped, so it suits short, fixed lists best.

Adding Scroll When Needed

For longer content, attach verticalScroll to the Column's modifier. Now the whole stack scrolls as one piece.

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    Text("Long content")
}

Nesting for Real Screens

Real screens nest Columns inside Columns. An outer Column holds sections, and each section is its own little Column of details.

Quick Check

Let's confirm how a Column arranges its children.

Recap: Column

You learned Column: it stacks children top to bottom in order, wraps content by default, and uses arrangement, alignment, and modifiers to size and space them.

よくある質問

「Column：縦に積み重ねる」レッスンは無料ですか？

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

「Column：縦に積み重ねる」で何を学びますか？

子要素を上から下へ配置します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Column：縦に積み重ねる」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Jetpack Compose Academyに戻る