【Xcode/SwiftUI】QGridを使ったおしゃれなCollectionView

実装

QGridのインストール

SPM (Swift Package Managerからしか入れられない?)

President.swift (モデル)

import SwiftUI

struct President: Identifiable {
    let id = UUID()
    let firstName: String
    let lastName: String
    let imageName: String

    init(firstName: String, lastName: String, imageName: String) {
        self.firstName = firstName
        self.lastName = lastName
        self.imageName = imageName
    }
}

struct GridCell: View {
    var president: President

    var body: some View {
        VStack {
            Image(president.imageName)
                .resizable()
                .scaledToFit()
                .clipShape(Circle())
                .shadow(color: .primary, radius: 5)
                .padding([.horizontal, .top], 7)
            Text(president.firstName).lineLimit(1)
            Text(president.lastName).lineLimit(1)
        }
    }
}

HomeView.swift (デフォルトだとContentView.swift)

import SwiftUI
import QGrid

struct HomeView: View {
    private let predident = [
        President(firstName: "Joe", lastName: "Biden", imageName: "img_biden"),
        President(firstName: "Donald", lastName: "Trump", imageName: "img_donald"),
        President(firstName: "Barack", lastName: "Obama", imageName: "img_barack"),
        President(firstName: "George.W", lastName: "Bush", imageName: "img_george_w"),
        President(firstName: "Bill", lastName: "Clinton", imageName: "img_bill"),
        President(firstName: "George.H.W", lastName: "Bush", imageName: "img_george_hw"),
        President(firstName: "Ronald", lastName: "Reagan", imageName: "img_ronald"),
        President(firstName: "Jimmy", lastName: "Carter", imageName: "img_jimmy"),
        President(firstName: "Gerald", lastName: "Ford", imageName: "img_gerald")
    ]

    var body: some View {
        QGrid(self.predident, columns: 3) { GridCell(president: $0) }
    }

}

画像と名前は各自好きなものにしてください。