SwiftUI Academy · レッスン

LazyVGridで適応型グリッドを作る

柔軟なグリッド列にカードを配置します。

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

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

Why a Grid?

Stacks give you rows or columns, but a LazyVGrid arranges items into neat rows and columns, like a photo album. 🖼️

Define the Columns

A LazyVGrid needs a columns array of GridItem values that describe how many tracks to lay out.

let columns = [GridItem(), GridItem()]
LazyVGrid(columns: columns) {
    ForEach(items) { Cell($0) }
}

Flexible Items

A GridItem(.flexible()) stretches to share space evenly, so two flexible items make two equal columns.

let columns = [
    GridItem(.flexible()),
    GridItem(.flexible())
]

Fixed Width Tracks

Use GridItem(.fixed(80)) when you want a column to stay exactly 80 points wide no matter the screen.

let columns = [GridItem(.fixed(80))]

Truly Adaptive

The magic option is .adaptive(minimum:): it fits as many columns as will fit, adjusting to any screen size.

let columns = [
    GridItem(.adaptive(minimum: 100))
]

Always Inside a Scroll

Wrap your LazyVGrid in a ScrollView so the grid can grow past the screen and load cells lazily.

ScrollView {
    LazyVGrid(columns: columns) {
        ForEach(items) { Cell($0) }
    }
}

Spacing Between Cells

Tune the gaps with a spacing argument on the grid and on each GridItem for tidy, balanced cells.

LazyVGrid(columns: columns, spacing: 16) {
    ForEach(items) { Cell($0) }
}

Cells Are Just Views

Each item in the ForEach becomes a cell, so any view works: an image, a card, or a labeled button.

ForEach(photos) { photo in
    Image(photo.name)
        .resizable()
}

Lazy by Name

Like other lazy containers, LazyVGrid builds cells as they scroll in, so large galleries stay smooth.

Horizontal Cousin

Need columns of fixed rows scrolling sideways? LazyHGrid is the horizontal counterpart with the same GridItem API.

Responsive Layouts

One adaptive grid looks great on a phone and an iPad, since columns reflow automatically to fill the space. ✨

Quick Check

Think about which GridItem reacts to screen size.

Recap

You learned to build flexible, fixed, and adaptive grids with LazyVGrid inside a ScrollView for responsive layouts. 🎉

よくある質問

「LazyVGridで適応型グリッドを作る」レッスンは無料ですか？

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

「LazyVGridで適応型グリッドを作る」で何を学びますか？

柔軟なグリッド列にカードを配置します。ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「LazyVGridで適応型グリッドを作る」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← SwiftUI Academyに戻る