LazyColumnによるリスト
スクロール可能なリストを効率よく表示します
「LazyColumnによるリスト」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。
Column だけではいけない理由
Column は子要素をすべて一度にコンポーズします。長いリストやスクロールするリストでは、メモリを無駄に使い、UI の動作も遅くなります。表示中の項目だけを構築するリストが必要です。
LazyColumn の登場
LazyColumn はスクロール可能な縦方向のリストで、現在画面上に表示されている項目だけをコンポーズします。以前の RecyclerView に似ていますが、はるかにシンプルです。
LazyColumn {
items(messages) { msg ->
Text(text = msg)
}
}items() 関数
LazyColumn の lambda 内で items(list) を呼び出し、各要素用の Composable を渡します。Compose はユーザーのスクロールに応じて、必要なときに呼び出します。
LazyColumn {
items(users) { user ->
Text(text = user.name)
}
}通常のループではありません
LazyColumn の中で通常の for ループを使わないでください。それでは遅延処理の利点が失われます。Compose が必要に応じて項目を構築できるよう、必ず items()(または itemsIndexed())を使います。
単一のヘッダー項目
item { }(単数形)を使うと、ループする項目の前にヘッダーなどの固定要素を 1 つ追加できます。
LazyColumn {
item { Text("Header") }
items(data) { Text(it) }
}itemsIndexed
位置が必要な場合は itemsIndexed を使うと、インデックスと要素の両方を取得できます。
LazyColumn {
itemsIndexed(data) { index, value ->
Text(text = "$index: $value")
}
}安定性のためのキー
各項目に安定した key を指定すると、リストが変更されたときも Compose が項目を正しく追跡できます。パフォーマンスとアニメーションの改善にもつながります。
items(users, key = { it.id }) { user ->
Text(user.name)
}項目間の間隔
LazyColumn では verticalArrangement と contentPadding を使って、項目間の間隔やリストの端のパディングを設定できます。
LazyColumn(
verticalArrangement = Arrangement.spacedBy(8.dp),
contentPadding = PaddingValues(16.dp)
) {
items(data) { Text(it) }
}LazyRow
横方向にスクロールするリストには LazyRow もあります。API は同じで、方向だけが異なります。カードのカルーセルに便利です。
LazyRow {
items(images) { img ->
Image(painter = img, contentDescription = null)
}
}スクロール機能を内蔵
LazyColumn にスクロール用 Modifier を追加する必要はありません。自動的にスクロールできます。verticalScroll を追加すると競合してクラッシュします。Lazy リストは自身でスクロールを処理します。
まとめ
ヘッダー、キー、間隔を設定した項目のリストです。
@Composable
fun MessageList(messages: List<Message>) {
LazyColumn(
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
item { Text("Inbox") }
items(messages, key = { it.id }) { msg ->
Text(text = msg.text)
}
}
}クイックチェック
スクロール可能な Column と比べた LazyColumn の主な利点は何ですか?
まとめ
LazyColumn:
- 表示中の項目だけを構築するため、長いリストでも効率的です。
forループではなく、items()/itemsIndexed()を使います。- 安定性のために
keyを追加し、ヘッダーにはitem { }を使います。 - 自動的にスクロールするため、スクロール用 Modifier は不要です。
LazyRowは横方向のバージョンです。
AI チューターと学ぶ Kotlin — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 36
- レッスン
- 152
よくある質問
「LazyColumnによるリスト」レッスンは無料ですか?
はい。「LazyColumnによるリスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。
「LazyColumnによるリスト」で何を学びますか?
スクロール可能なリストを効率よく表示します ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「LazyColumnによるリスト」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか?
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Column、Row、Box
- Modifierシステム
- 配置と整列
- LazyColumnによるリスト