将 NavigationLink 分配给数组中的图像 Swift UI

Question

我有一组图像要通过 LazyVgrid。

我想知道如何将 NavigationLink 分配给存储在数组中的图像名称，单击 icon1 导航到 page1，等等所有 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)
                        
                        
                }
            }
        }
    }

Answer 1

对于这种情况，我更喜欢包含所有相关信息的枚举。您也可以使用结构来执行此操作，其背后的推理保持不变。

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

你的 Grid 观点：

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 // Itterate over all enum cases
                    NavigationLink(destination: imageEnum.detailView){ // get detailview here
                        Image(imageEnum.imageName) // get image assset name here
                            .resizable()
                            .scaledToFill()
                            .clipped()
                            .cornerRadius(25)
                    }
                }
            }
        }
    }
}

结果：

将 NavigationLink 分配给数组中的图像 Swift UI

Assigning NavigationLink to Images within Array in Swift UI

arrays

image

swift

swiftui

lazyvgrid