Un carosello interattivo con zoom e scrollTransition in SwiftUI ed Xcode26

Carousel.swift

//
//  ContentView.swift
//  CwC - Code With Costantino
//
//  https://youtu.be/3uTIvdVY78A
//  Created by Costantino Pistagna on 15/08/25.
//
import SwiftUI

struct Wallpaper: Hashable, Identifiable, Equatable {
    var id: UUID = UUID()
    var name: String
    
    init(_ name: String) {
        self.name = name
    }
}

struct ContentView: View {
    private let backgrounds = [
        Wallpaper("Maverick"),
        Wallpaper("Yosemite"),
        Wallpaper("ElCapitan"),
        Wallpaper("HighSierra"),
        Wallpaper("Mojave"),
        Wallpaper("Catalina"),
        Wallpaper("BigSur"),
        Wallpaper("Monterey"),
        Wallpaper("Ventura"),
        Wallpaper("Sonoma")
    ]
    @State private var scrollPosition: Wallpaper.ID?
    @State private var selectedWallpaper: Wallpaper?
    @Namespace private var animation
    @State private var showWallpaper: Bool = false
    
    var body: some View {
        VStack {
            Text("Wallpapers")
                .font(.title2).fontWeight(.medium)
                .frame(maxWidth: .infinity, alignment: .leading)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 60) {
                    ForEach(backgrounds) { wallpaper in
                        Button {
                            withAnimation {
                                selectedWallpaper = wallpaper
                                scrollPosition = selectedWallpaper?.id
                                showWallpaper.toggle()
                            }
                        } label: {
                            Image(wallpaper.name)
                                .resizable()
                                .frame(width: 300, height: 200)
                                .cornerRadius(16)
                        }
                        .matchedTransitionSource(id: wallpaper.name, in: animation)
                        .cornerRadius(16)
                        .scrollTransition(topLeading: .interactive, bottomTrailing: .interactive, transition: { effect, phase in
                            effect
                                .scaleEffect(phase.value != 0 ? 0.9 : 1)
                                .opacity(phase.value != 0 ? 0.5 : 1)
                                .rotation3DEffect(.degrees(phase.value * 25), axis: (0, 0, 1))
                        })
                        .shadow(radius: 8)
                    }
                }
                .scrollTargetLayout()
                .fullScreenCover(isPresented: $showWallpaper) {
                    if let wallpaper = selectedWallpaper {
                        Image(wallpaper.name)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .edgesIgnoringSafeArea(.all)
                            .navigationTransition(.zoom(sourceID: wallpaper.name, in: animation))
                    }
                }
            }
            .scrollClipDisabled()
            .scrollTargetBehavior(.viewAligned(anchor: .zero))
            .scrollPosition(id: $scrollPosition)
            .onChange(of: scrollPosition) {
                selectedWallpaper = backgrounds.first(where: { $0.id == scrollPosition })
            }
            
            Text("Wallpaper selezionato: \(selectedWallpaper?.name ?? "")")
                .frame(maxWidth: .infinity, alignment: .leading)
        }
        .safeAreaPadding()
        .onAppear {
            selectedWallpaper = backgrounds.first
        }
    }
}

#Preview {
    ContentView()
}