Row：横に並べる
子要素を左から右へ配置します。
「Row：横に並べる」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Side by Side
When you want children in a horizontal line, you use a Row. It is the sideways sibling of Column. ➡️
Your First Row
A Row takes a trailing lambda just like Column. Each child you call inside lands next to the previous one, left to right.
Row {
Text("Left")
Text("Right")
}Order Is Left to Right
Children flow in source order across the screen. The first Composable sits at the start, the next beside it, and so on.
A Classic Icon Plus Label
Rows shine for small pairs, like an Icon next to a Text label. That side-by-side combo is everywhere in real apps.
Row {
Icon(Icons.Default.Star, null)
Text("Favorite")
}Spacing Between Children
Use horizontalArrangement with spacedBy to drop an even gap between each child instead of padding them one by one.
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
Text("A")
Text("B")
}Aligning Children Vertically
Set verticalAlignment to line children up across the row's height. CenterVertically keeps an icon and tall text neatly centered.
Row(verticalAlignment = Alignment.CenterVertically) {
Icon(Icons.Default.Star, null)
Text("Centered")
}Pushing Items Apart
Arrangement.SpaceBetween pins the first child to the start and the last to the end, spreading any extra space between them.
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Text("Start")
Text("End")
}Sharing Space with Weight
Give a child weight in its modifier to make it claim the leftover width. Two equal weights split the row evenly.
Row {
Text("Half", Modifier.weight(1f))
Text("Half", Modifier.weight(1f))
}Rows Don't Scroll Yet
A plain Row does not scroll. Children that overflow the width get clipped, so keep a basic Row to content that fits.
Adding Horizontal Scroll
For wide content, attach horizontalScroll to the Row's modifier and the whole strip becomes swipeable sideways.
Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
Text("Wide content")
}Rows Inside Columns
Most screens combine both. A Column stacks sections vertically while each section uses a Row to lay its pieces side by side.
Quick Check
Let's confirm how a Row lays out its children.
Recap: Row
You learned Row: it places children left to right, uses arrangement and alignment to position them, and shares width with weight for flexible layouts.
よくある質問
「Row：横に並べる」レッスンは無料ですか？
はい。「Row：横に並べる」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「Row：横に並べる」で何を学びますか？
子要素を左から右へ配置します。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Row：横に並べる」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。