レイアウト コンテナ

Jetpack Compose には、UI コンポーネントの構造化と配置に役立つレイアウト コンテナがいくつか用意されています。Row や Column などの基本的なレイアウト コンポーザブルは、シンプルな配置を処理しますが、多くのアプリでは、画面サイズの変更やユーザーデータの増加に伴い、よりレスポンシブで適応性の高いコンテナ ソリューションが必要になります。

レイアウト コンテナには次のものがあります。

• 遅延リストと遅延グリッド: LazyColumn、LazyRow、LazyVerticalGrid などのコンポーネント。現在ビューポートに表示されているアイテムのみをコンポーズしてレイアウトすることで、大規模なデータセットや動的なサイズのデータセットを効率的に表示します。
• ページャー: HorizontalPager や VerticalPager などのコンテナ。ユーザーは、コンテンツのページ間をスワイプまたはスクロールできます。
• フロー レイアウト: レスポンシブな 1 次元コンテナ（FlowRow と FlowColumn）。スペースがなくなると、オーバーフローしたアイテムが次の行または列に自動的に折り返されます。
• グリッド: コンテナサイズに適応する複数列または複数行のレイアウトでアイテムを表示する、柔軟な 2 次元構造。
• FlexBox: CSS Flexbox に着想を得たアダプティブ コンテナ。メイン軸と交差軸に沿ってアイテムを折り返す、拡大する、縮小する、整列する方法を細かく制御して、使用可能なスペースを埋めることができます。

適切なレイアウト コンテナを選択する

Compose でレイアウトを作成する際、基本的なレイアウト コンテナとより高度なレイアウト コンテナのどちらを選択するかは、デザイン、スペースが制限されている場合にアイテムを折り返す必要があるかどうか、アイテムのサイズを動的に変更する方法によって異なります。

次の表に、Compose の 1D レイアウト コンテナの機能をまとめます。

コンテナ	アイテムを新しい行に折り返す	アイテムごとの拡大	アイテムごとの縮小	アイテムごとの開始サイズ	アイテムは、複数の行で使用可能なスペースを埋めるために拡張されます。	アイテムを並べ替える	遅延読み込み	最適な用途:
行 / 列	❌	✅（weight 経由）1 回線のみ	❌	❌	❌	❌	❌	アイテム数が少なく固定された均一な行。アイテムが利用可能な境界内に収まり、複数行に折り返す必要がない。
FlowRow / FlowColumn	✅	制限付き	❌	❌	一部	❌	❌	FlexBox に置き換えられました。
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	パフォーマンスを最適化するために、表示されているアイテムのみをレンダリングする必要がある、長いリストまたは無限のリスト。 一方向にスクロールする動的なデータセットや大規模なデータセット。
FlexBox	✅	✅	✅	✅	✅	✅	❌	初期サイズの指定、動的なアイテムの拡大/縮小（grow/shrink）、視覚的な並べ替え（order）、アイテムレベルのクロス軸の配置（alignSelf）など、適応機能を必要とするレイアウト。 サイズの異なるアイテムを配置する。

次の表に、Grid と他の同様のコンポーザブルの機能をまとめます。

コンテナ	厳密な 2D アライメント	アイテムのまたがり（列）	アイテムのまたがり（行）	遅延読み込み	最適な用途:
グリッド	✅	✅（GridArea 経由）	✅	❌	すべてのアイテムが画面上にあり、明示的な水平方向と垂直方向の配置が必要な、構造的な 2 次元レイアウト。 画面サイズに応じてレイアウトを適応的に再構成する。
LazyVerticalGrid	✅	✅（span 経由）	❌	✅	縦スクロール フィードと、列が必要な大規模なカタログ。
LazyStaggeredGrid	❌（1D のみ）	部分的（フルスパンのみ）	❌	✅	高さが異なるアイテムを含むスクロール フィード。
LazyHorizontalGrid	✅	❌	✅	✅	横方向にスクロールするカルーセルまたは複数行のページ分割されたデータ。
行と列を組み合わせる	❌	❌	❌	❌	アイコンの横にテキストラベルを配置するなど、シンプルなコンポーネントの組み立て。