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()
}
}
}
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")
}
}
}
}
}
}