NavigationLinkのList表示

ContentView.swift

//
//  ContentView.swift
//  MyFirstSwiftUIApp
//
//  Created by Koichiro Mori on 2022/04/24.
//

import SwiftUI

struct Data: Identifiable {
    var id = UUID()
    let title: String
    let imageName: String
    let imageDescription: String
    let imageTakenDate: String
}

struct ContentView: View {
    var items = [Data]()
    
    var body: some View {
        NavigationView {
            List(items) { data in
                NavigationLink(destination: DataView(data: data)) {
                    HStack {
                        Image(data.imageName)
                            .resizable().frame(width: 100, height: 100, alignment: .center)
                            .cornerRadius(10)
                        Text(data.title)
                            .foregroundColor(.primary)
                            .fontWeight(.bold)
                    }
                }
            }
            .navigationBarTitle("Photos")
        }
    }
}

struct DataView: View {
    var data:Data
    
    var body: some View {
        VStack {
            Image(data.imageName)
                .resizable().frame(width: 330, height: 200, alignment: .center)
                .aspectRatio(contentMode: .fit)
            Text(data.imageDescription)
                .font(.largeTitle)
                .padding(5)
            Spacer()
            Text(data.imageTakenDate).padding(5)
    
        }.navigationBarTitle(data.title)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView(items: [
                Data(title: "Beach 1", imageName: "beach1", imageDescription: "This is a beach! This is a beach! This is a beach! This is a beach! This is a beach! ", imageTakenDate: "1/1/2020"),
                Data(title: "Beach 2", imageName: "beach2", imageDescription: "This is a beach! This is a beach! This is a beach! This is a beach! This is a beach! ", imageTakenDate: "1/1/2020"),
                Data(title: "Dog", imageName: "dog", imageDescription: "This is a dog. This is a dog. This is a dog. This is a dog. This is a dog. ", imageTakenDate: "1/1/2020"),
                Data(title: "Car", imageName: "car", imageDescription: "This is a car. This is a car. This is a car. This is a car. This is a car. This is a car. ", imageTakenDate: "1/1/2020"),
                Data(title: "Nature", imageName: "nature", imageDescription: "This is a nature. This is a nature. This is a nature. This is a nature. This is a nature. ", imageTakenDate: "1/1/2020"),
                Data(title: "Wedding", imageName: "wedding", imageDescription: "This is wedding. This is wedding. This is wedding. This is wedding. This is wedding. This is wedding. ", imageTakenDate: "1/1/2020"),
                Data(title: "Fountain", imageName: "fountain", imageDescription: "This is fountain. This is fountain. This is fountain. This is fountain. This is fountain. This is fountain. ", imageTakenDate: "1/1/2020")
            ])
            .environment(\.colorScheme, .dark)
            .previewDevice(PreviewDevice(rawValue: "iPhone 11"))
            
            ContentView(items: [
                Data(title: "Beach 1", imageName: "beach1", imageDescription: "This is a beach! This is a beach! This is a beach! This is a beach! This is a beach! ", imageTakenDate: "1/1/2020"),
                Data(title: "Beach 2", imageName: "beach2", imageDescription: "This is a beach! This is a beach! This is a beach! This is a beach! This is a beach! ", imageTakenDate: "1/1/2020"),
                Data(title: "Dog", imageName: "dog", imageDescription: "This is a dog. This is a dog. This is a dog. This is a dog. This is a dog. ", imageTakenDate: "1/1/2020"),
                Data(title: "Car", imageName: "car", imageDescription: "This is a car. This is a car. This is a car. This is a car. This is a car. This is a car. ", imageTakenDate: "1/1/2020"),
                Data(title: "Nature", imageName: "nature", imageDescription: "This is a nature. This is a nature. This is a nature. This is a nature. This is a nature. ", imageTakenDate: "1/1/2020"),
                Data(title: "Wedding", imageName: "wedding", imageDescription: "This is wedding. This is wedding. This is wedding. This is wedding. This is wedding. This is wedding. ", imageTakenDate: "1/1/2020"),
                Data(title: "Fountain", imageName: "fountain", imageDescription: "This is fountain. This is fountain. This is fountain. This is fountain. This is fountain. This is fountain. ", imageTakenDate: "1/1/2020")
            ])
            .environment(\.colorScheme, .light)
            .previewDevice(PreviewDevice(rawValue: "iPhone 11"))
        }
        
        ContentView(items: [
            Data(title: "Beach 1", imageName: "beach1", imageDescription: "This is a beach! This is a beach! This is a beach! This is a beach! This is a beach! ", imageTakenDate: "1/1/2020"),
            Data(title: "Beach 2", imageName: "beach2", imageDescription: "This is a beach! This is a beach! This is a beach! This is a beach! This is a beach! ", imageTakenDate: "1/1/2020"),
            Data(title: "Dog", imageName: "dog", imageDescription: "This is a dog. This is a dog. This is a dog. This is a dog. This is a dog. ", imageTakenDate: "1/1/2020"),
            Data(title: "Car", imageName: "car", imageDescription: "This is a car. This is a car. This is a car. This is a car. This is a car. This is a car. ", imageTakenDate: "1/1/2020"),
            Data(title: "Nature", imageName: "nature", imageDescription: "This is a nature. This is a nature. This is a nature. This is a nature. This is a nature. ", imageTakenDate: "1/1/2020"),
            Data(title: "Wedding", imageName: "wedding", imageDescription: "This is wedding. This is wedding. This is wedding. This is wedding. This is wedding. This is wedding. ", imageTakenDate: "1/1/2020"),
            Data(title: "Fountain", imageName: "fountain", imageDescription: "This is fountain. This is fountain. This is fountain. This is fountain. This is fountain. This is fountain. ", imageTakenDate: "1/1/2020")
        ])
        .environment(\.colorScheme, .light)
        .previewDevice(PreviewDevice(rawValue: "iPad Air 2"))
    }
}