0Pricing
Swift Academy · レッスン

LazyVGridとLazyHGrid

GridItemの固定・柔軟・適応型の列で、レスポンシブなグリッドレイアウトを構築します。

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

ようこそ

`LazyVGrid` と `LazyHGrid` は、`GridItem` を使って列や行の定義をカスタマイズできるグリッドレイアウトを提供します。ギャラリー、カタログ、カードレイアウトに最適です。

GridItemの種類

• `.fixed(size)` — 固定ピクセルサイズです • `.flexible(min:max:)` — 利用可能な空間を埋めます • `.adaptive(minimum:maximum:)` — 収まるだけの列を配置します

基本的なLazyVGrid

```swift let columns = [GridItem(.adaptive(minimum: 100))] LazyVGrid(columns: columns, spacing: 16) { ForEach(items) { item in ItemCard(item: item) } } ```

固定列

```swift let cols = Array(repeating: GridItem(.fixed(120)), count: 3) LazyVGrid(columns: cols) { ForEach(0..<12) { i in Color.blue.frame(height:80) } } ```

GridItem型の組み合わせ

```swift let cols = [GridItem(.flexible(minimum:80)), GridItem(.fixed(100))] ``` Pinterest風のレイアウトには、複数の型を組み合わせます。

LazyHGrid

```swift let rows = [GridItem(.fixed(60)), GridItem(.fixed(60))] ScrollView(.horizontal) { LazyHGrid(rows: rows, spacing: 8) { ForEach(tags) { tag in TagView(tag: tag) } } } ```

配置と間隔

```swift LazyVGrid(columns: columns, alignment: .leading, spacing: 12) { ... } ```

グリッドのセクションヘッダー

```swift LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) { Section(header: Text("Section 1").font(.headline)) { ForEach(items1) { ItemView($0) } } } ```

.adaptive と .fixed の選択

• `.adaptive` — 写真グリッドや動的なコンテンツに最適です • `.fixed` — 正確な制御が必要な場合に使用します • `.flexible` — CSS の flexbox の列のように均等に埋めます

遅延読み込みのパフォーマンス

`Lazy` 接頭辞は、表示されているセルだけが描画されることを意味します。長いリストでは不可欠です。遅延読み込みを使用しない場合は、すべての項目が最初に作成されます。

確認問題

最小幅に収まるだけの列を作成する `GridItem` の種類はどれですか？

まとめ

重要なポイント： • グリッドレイアウトには `LazyVGrid(columns:)` / `LazyHGrid(rows:)` を使用します • `GridItem(.fixed)`、`.flexible()`、`.adaptive(minimum:)` • 固定ヘッダーには `pinnedViews: .sectionHeaders` を使用します • Lazy = 表示されているセルだけが描画されます • レスポンシブなグリッドには `.adaptive` が最も簡単です 次は `Spacer`、パディング、フレームです。

よくある質問

「LazyVGridとLazyHGrid」レッスンは無料ですか？

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

「LazyVGridとLazyHGrid」で何を学びますか？

GridItemの固定・柔軟・適応型の列で、レスポンシブなグリッドレイアウトを構築します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「LazyVGridとLazyHGrid」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. VStack、HStack、ZStackの基礎
  2. LazyVGridとLazyHGrid
  3. Spacer、Padding、Frameモディファイア
  4. 適応型レイアウトのためのGeometryReader
← Swift Academyに戻る