iOS开发：如何用数组数据替换ForEach实现图片网格视图

要把ForEach从遍历数字改成遍历你的ProjectInfo数组，需要做几个关键修改，一步步理清楚：

1. 让ProjectInfo遵循Identifiable协议 #

SwiftUI的ForEach需要能识别数组里的每个元素，你的ProjectInfo已经有id字段，直接让它遵循Identifiable协议即可：

struct ProjectInfo: Codable, Identifiable {
    let id: String
    let image_filename: String
    let project_id: String
}

2. 触发数据获取方法 #

你写了fetchData()但没调用它，得在视图出现时触发，确保data数组能加载到服务器返回的数据：
在ScrollView外面添加onAppear修饰符：

ScrollView {
    // 网格内容...
}
.onAppear {
    fetchData()
}

3. 替换ForEach循环逻辑 #

把原来遍历1..<100的ForEach改成遍历data数组，同时用数组元素的image_filename拼接真实图片URL：

ForEach(data) { item in
    VStack(alignment: .leading){
        NavigationLink(
            destination: ViewImage(project_job_id: item.project_id, image_filename: item.image_filename)
        ) {
            // 替换测试URL，用你的服务器图片基础路径 + image_filename
            if let imageUrl = URL(string: "https://mywebsite.com/images/\(item.image_filename)") {
                AsyncImage(url: imageUrl)
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                    .clipped()
                    .aspectRatio(1, contentMode: .fit)
            } else {
                // URL无效时显示灰色占位符
                Color.gray
                    .aspectRatio(1, contentMode: .fit)
            }
        }
    }
}

注意：这里的https://mywebsite.com/images/是假设的图片存储基础路径，你需要换成自己服务器的实际地址前缀。

4. 修正导航标题位置 #

原来的.navigationTitle放在VStack里会导致每个网格项都生成标题，把它移到ScrollView外面：

ScrollView {
    // 网格内容...
}
.navigationTitle("Project Photos - " + jobid)
.onAppear {
    fetchData()
}

修改后的完整代码 #

import SwiftUI

struct ProjectViewPhotos: View {
    @State private var data: [ProjectInfo] = []
    let jobid: String

    var body: some View {
        ScrollView {
            LazyVGrid(columns: [.init(.adaptive(minimum: 100, maximum: .infinity), spacing: 3)], spacing: 3) {
                ForEach(data) { item in
                    VStack(alignment: .leading){
                        NavigationLink(
                            destination: ViewImage(project_job_id: item.project_id, image_filename: item.image_filename)
                        ) {
                            if let imageUrl = URL(string: "https://mywebsite.com/images/\(item.image_filename)") {
                                AsyncImage(url: imageUrl)
                                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                                    .clipped()
                                    .aspectRatio(1, contentMode: .fit)
                            } else {
                                Color.gray
                                    .aspectRatio(1, contentMode: .fit)
                            }
                        }
                    }
                }
            }
        }
        .navigationTitle("Project Photos - " + jobid)
        .onAppear {
            fetchData()
        }
    }

    func fetchData() {
        guard let url = URL(string: "https://mywebsite.com/index.php?projectid=" + jobid) else { return }

        URLSession.shared.dataTask(with: url) { data, response, error in
            guard let data = data else { return }
            do {
                let projectinfo = try JSONDecoder().decode([ProjectInfo].self, from: data)
                DispatchQueue.main.async {
                    self.data = projectinfo
                }
            } catch {
                print("数据解析错误：\(error)")
            }
        }.resume()
    }
}

struct ProjectInfo: Codable, Identifiable {
    let id: String
    let image_filename: String
    let project_id: String
}

#Preview {
    NavigationStack { // 预览中添加NavigationStack，让导航链接正常生效
        ProjectViewPhotos(jobid: "47")
    }
}

关键修改点说明 #

• 给ProjectInfo添加Identifiable：让ForEach可以直接遍历数组，无需手动指定id参数
• 调用fetchData()：确保视图出现时加载数据，避免data数组始终为空
• 动态构建图片URL：用数组元素的image_filename拼接真实地址，同时增加URL有效性判断，避免强制解包崩溃
• 调整导航标题位置：避免每个网格项重复生成标题
• 预览添加NavigationStack：让预览中的导航链接功能正常

内容的提问来源于stack exchange，提问作者user29966277