How to build an image gallery in SwiftUI

import SwiftUI

// MARK: - Model
struct GalleryItem: Identifiable {
    let id: UUID
    let url: URL
    let caption: String
}

// MARK: - Thumbnail Cell
struct GalleryCell: View {
    let item: GalleryItem

    var body: some View {
        AsyncImage(url: item.url, transaction: Transaction(animation: .easeIn)) { phase in
            switch phase {
            case .empty:
                ZStack {
                    Color.secondary.opacity(0.15)
                    ProgressView()
                }
            case .success(let image):
                image
                    .resizable()
                    .scaledToFill()
            case .failure:
                ZStack {
                    Color.secondary.opacity(0.15)
                    Image(systemName: "photo.slash")
                        .foregroundStyle(.secondary)
                }
            @unknown default:
                Color.clear
            }
        }
        .frame(width: 110, height: 110)
        .clipped()
        .cornerRadius(8)
        .accessibilityLabel(item.caption)
    }
}

// MARK: - Detail View
struct GalleryDetailView: View {
    let item: GalleryItem
    @State private var scale: CGFloat = 1
    @State private var offset: CGSize = .zero

    var body: some View {
        GeometryReader { geo in
            AsyncImage(url: item.url, transaction: Transaction(animation: .easeIn)) { phase in
                switch phase {
                case .success(let image):
                    image
                        .resizable()
                        .scaledToFit()
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .scaleEffect(scale)
                        .offset(offset)
                        .gesture(
                            MagnifyGesture()
                                .onChanged { value in scale = max(1, value.magnification) }
                                .simultaneously(with:
                                    DragGesture()
                                        .onChanged { value in offset = value.translation }
                                        .onEnded { _ in
                                            withAnimation(.spring) { offset = .zero }
                                        }
                                )
                        )
                case .empty:
                    ProgressView().frame(maxWidth: .infinity, maxHeight: .infinity)
                default:
                    Image(systemName: "photo.slash")
                        .font(.largeTitle)
                        .foregroundStyle(.secondary)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                }
            }
        }
        .navigationTitle(item.caption)
        .navigationBarTitleDisplayMode(.inline)
        .background(.black)
    }
}

// MARK: - Gallery Grid
struct ImageGalleryView: View {
    let items: [GalleryItem]

    private let columns = [GridItem(.adaptive(minimum: 110), spacing: 4)]

    var body: some View {
        NavigationStack {
            ScrollView {
                LazyVGrid(columns: columns, spacing: 4) {
                    ForEach(items) { item in
                        NavigationLink(value: item) {
                            GalleryCell(item: item)
                        }
                        .buttonStyle(.plain)
                    }
                }
                .padding(4)
            }
            .navigationTitle("Gallery")
            .navigationDestination(for: GalleryItem.self) { item in
                GalleryDetailView(item: item)
            }
        }
    }
}

// MARK: - Preview
#Preview {
    let sampleItems: [GalleryItem] = (1...18).map { i in
        GalleryItem(
            id: UUID(),
            url: URL(string: "https://picsum.photos/seed/\(i)/400/400")!,
            caption: "Photo \(i)"
        )
    }
    ImageGalleryView(items: sampleItems)
}