Detail view for images

Hello, how can I add a detail view to this code? I want to show the image in a detail view and that for every image single.

import SwiftUI

struct ContentView: View {

    var images: [String] = ["noaa1", "noaa2", "noaa3", "noaa4", "noaa5", "noaa6", "noaa7", "noaa8", "noaa9", "noaa10", "noaa11", "noaa12", "noaa13", "noaa14", "noaa15", "noaa16", "noaa17", "noaa18"]

    

    var columnGrid: [GridItem] = [GridItem(.flexible()), GridItem(.flexible())]

    

    var body: some View {

            ScrollView {

                LazyVGrid(columns: columnGrid) {

                    ForEach(images, id: \.self) { image in

                        Image(image)

                            .resizable()

                            .scaledToFit()

                            .cornerRadius(10)

                    

                }

            }

        }

    }
    

    struct ContentView_Previews: PreviewProvider {

        static var previews: some View {

            ContentView()

        }

    }

}

Accepted Reply

How can I add a detail view to this code? I want to show the image in a detail view and that for every image single.

Do you want to show a detail view when you tap on an image ?

Note: when you post code, use Paste and Match Style to avoid all the blank lines. That makes code much easier to grasp.

I would do this:

struct ImageDetail: View {
    var imageName: String
    var body: some View {
        VStack {
            Image(imageName)
                .resizable()      // do it before frame
                .scaledToFit()    // do it before frame
                .frame(width: 300, height : 300, alignment: .center)                
            Text("Detail \(imageName)")
        }
    }
}


struct ContentView: View {
    
    var images: [String] = ["noaa1", "noaa2", "noaa3", "noaa4", "noaa5", "noaa6", "noaa7", "noaa8", "noaa9", "noaa10", "noaa11", "noaa12", "noaa13", "noaa14", "noaa15", "noaa16", "noaa17", "noaa18"]
    
    var columnGrid: [GridItem] = [GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVGrid(columns: columnGrid) {
                    ForEach(images, id: \.self) { image in
                        NavigationLink (destination: ImageDetail(imageName: image)) {
                            Image(image)
                                .resizable()
                                .scaledToFit()
                                .cornerRadius(10)
                        }.navigationTitle("Noaa")
                    }
                }
            }
        }
    }
    
}
  • Yes, that's right. Thank you for the hint and your fast response. I tried and it works.

Add a Comment

Replies

How can I add a detail view to this code? I want to show the image in a detail view and that for every image single.

Do you want to show a detail view when you tap on an image ?

Note: when you post code, use Paste and Match Style to avoid all the blank lines. That makes code much easier to grasp.

I would do this:

struct ImageDetail: View {
    var imageName: String
    var body: some View {
        VStack {
            Image(imageName)
                .resizable()      // do it before frame
                .scaledToFit()    // do it before frame
                .frame(width: 300, height : 300, alignment: .center)                
            Text("Detail \(imageName)")
        }
    }
}


struct ContentView: View {
    
    var images: [String] = ["noaa1", "noaa2", "noaa3", "noaa4", "noaa5", "noaa6", "noaa7", "noaa8", "noaa9", "noaa10", "noaa11", "noaa12", "noaa13", "noaa14", "noaa15", "noaa16", "noaa17", "noaa18"]
    
    var columnGrid: [GridItem] = [GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVGrid(columns: columnGrid) {
                    ForEach(images, id: \.self) { image in
                        NavigationLink (destination: ImageDetail(imageName: image)) {
                            Image(image)
                                .resizable()
                                .scaledToFit()
                                .cornerRadius(10)
                        }.navigationTitle("Noaa")
                    }
                }
            }
        }
    }
    
}
  • Yes, that's right. Thank you for the hint and your fast response. I tried and it works.

Add a Comment