SwiftUIのCollectionView！ LazyGridで画像を並べてみる

SwiftUIのLazyGridをシンプルにつかう方法です

SwiftUIでCollectionViewってどうやるの？

マス目にコンテンツが並んだCollectionView。
SwiftUIでどうやればできるのでしょうか。

LazyGrid

LazyGridで、SwiftUIのレイアウト機能を活かしつつ、CollectionViewが作成できます。

方法

struct ContentView: View {
    var columns: [GridItem] =
    Array(repeating: .init(.flexible()), count: 2)
    var images: [String] = ["image0","image1","image2","image3"...]
    
    var body: some View {
        ScrollView(.vertical) {
            LazyVGrid(columns: columns, alignment: .center, spacing: 10) {
                ForEach(images, id: \.self) {imageName in
                    Image(imageName)
                        .resizable()
                        .aspectRatio(1, contentMode: .fill)
                }
            }
        }
    }
}

ScrollViewに入れているのでスクロールします。

🐣

---

フリーランスエンジニアです。
お仕事のご相談こちらまで
[e-mail]

Core MLやARKitを使ったアプリを作っています。
機械学習／AR関連の情報を発信しています。

Twitter
Medium