arraysswiftimageswiftuilazyvgrid

Assigning NavigationLink to Images within Array in Swift UI


I have an array of images that I am passing through a LazyVgrid.

I am wondering how I assign a NavigationLink to the Image names stored within the array, clicking icon1 navigates to page1, ect for all 8.

------ Swift UI -------

import SwiftUI

    struct Grid: View {
        var images: [String] = ["icon1", "icon2", "icon3", "icon4",
                                 "icon5", "icon6", "icon7","icon8"]
        
        var columnGrid: [GridItem] = [GridItem(.flexible(), spacing: 25), GridItem(.flexible(), spacing: 25)]
        
        var body: some View {
            LazyVGrid(columns: columnGrid, spacing: 50) {
                ForEach(images, id:\.self) { image in
                    Image(image)
                        .resizable()
                        .scaledToFill()
                        .frame(width: (UIScreen.main.bounds.width / 2.75 ) - 1,
                               height: (UIScreen.main.bounds.width / 2.75 ) - 1)
                        .clipped()
                        .cornerRadius(25)
                        
                        
                }
            }
        }
    }

Solution

  • For occasions like this I would prefer an enum that holds all related information. You also could do this with a struct the reasoning behind this stays the same.

    enum ImageEnum: String, CaseIterable{ //Please find a better name ;)
        case image1, image2 
        
        var imageName: String{ // get the assetname of the image
            switch self{
            case .image1:
                return "test"
            case .image2:
                return "test2"
            }
        }
        
        @ViewBuilder
        var detailView: some View{ // create the view here, if you need to add
            switch self{           // paramaters use a function or associated
            case .image1:          // values for your enum cases
                TestView1()
            case .image2:
                TestView2()
            }
        }
    }
    

    struct TestView1: View{
        var body: some View{
            Text("test1")
        }
    }
    
    struct TestView2: View{
        var body: some View{
            Text("test2")
        }
    }
    

    And your Grid View:

    struct Grid: View {
        
        var columnGrid: [GridItem] = [GridItem(.flexible(), spacing: 25), GridItem(.flexible(), spacing: 25)]
        
        var body: some View {
            NavigationView{ // Add the NavigationView
                LazyVGrid(columns: columnGrid, spacing: 50) {
                    ForEach(ImageEnum.allCases, id:\.self) { imageEnum in // Iterate over all enum cases
                        NavigationLink(destination: imageEnum.detailView){ // get detailview here
                            Image(imageEnum.imageName) // get image assset name here
                                .resizable()
                                .scaledToFill()
                                .clipped()
                                .cornerRadius(25)
                        }
                    }
                }
            }
        }
    }
    

    Result:

    Result