SwiftUI中‘Extra trailing closure passed in call’错误修复及图片列表实现咨询

一、修复"Extra trailing closure passed in call"错误 #

问题根源是你自定义的Task结构体与Swift标准库的并发APITask重名，编译器误将你写的Task { ... }识别为自定义结构体的初始化调用，而非并发任务。

两种解决方式： #

1. 明确指定标准库Task：
   将报错行的Task改为Swift.Task，明确调用标准库的并发任务：

   @Published var imageSelection: PhotosPickerItem? {
       didSet {
           if let imageSelection {
               Swift.Task { // 明确使用Swift标准库的Task
                   do {
                       try await loadTransferable(from: imageSelection)
                   } catch {
                       print("图片加载失败：\(error)")
                   }
               }
           }
       }
   }
   

2. 重命名自定义结构体：
   把自定义的Task结构体改成ToDoItem这类不冲突的名称，后续代码中的Task就默认指向标准库API。

另外建议把loadTransferable里的fatalError替换为错误打印，避免程序直接崩溃：

func loadTransferable(from imageSelection: PhotosPickerItem?) async throws  {
    do {
        if let data = try await imageSelection?.loadTransferable(type: Data.self) {
            if let uiImage = UIImage(data: data) {
                print("图片加载成功")
                self.image = Image(uiImage: uiImage)
            }
        }
    } catch {
        print("图片加载出错：\(error)")
    }
}

二、修改数据结构支持图片与名称 #

原Task结构体仅存储名称，需扩展属性以支持图片存储（用Data类型方便持久化）：

// 重命名避免与标准库Task冲突
struct ToDoItem: Identifiable {
    var id = UUID().uuidString
    var name: String // 条目名称
    var imageData: Data? // 存储图片二进制数据
}

// 对应修改数据仓库
class ToDoStore: ObservableObject {
    @Published var items = [ToDoItem]()
}

三、实现带相册上传与名称的完整列表 #

以下是完整的View代码，包含输入名称、选择相册图片、添加条目、列表展示与删除功能：

import SwiftUI
import PhotosUI

struct ContentView: View {
    @StateObject private var store = ToDoStore()
    @State private var newItemName = ""
    @State private var selectedImage: PhotosPickerItem?
    @State private var tempImageData: Data? // 临时存储选中的图片数据
    
    var body: some View {
        NavigationStack {
            List {
                // 添加条目区域
                HStack(spacing: 12) {
                    TextField("输入条目名称", text: $newItemName)
                    
                    // 相册选择按钮
                    PhotosPicker(selection: $selectedImage, matching: .images) {
                        Image(systemName: "photo")
                            .foregroundColor(.blue)
                    }
                    .onChange(of: selectedImage) { newItem in
                        guard let newItem else { return }
                        Swift.Task {
                            tempImageData = try? await newItem.loadTransferable(type: Data.self)
                        }
                    }
                    
                    // 添加按钮
                    Button("添加") {
                        guard !newItemName.isEmpty else { return }
                        let newItem = ToDoItem(name: newItemName, imageData: tempImageData)
                        store.items.append(newItem)
                        // 清空输入状态
                        newItemName = ""
                        tempImageData = nil
                        selectedImage = nil
                    }
                    .disabled(newItemName.isEmpty)
                }
                
                // 列表展示区域
                ForEach(store.items) { item in
                    HStack(spacing: 12) {
                        // 显示图片或占位图标
                        if let imageData = item.imageData, let uiImage = UIImage(data: imageData) {
                            Image(uiImage: uiImage)
                                .resizable()
                                .scaledToFill()
                                .frame(width: 50, height: 50)
                                .clipped()
                                .cornerRadius(8)
                        } else {
                            Image(systemName: "photo.fill")
                                .frame(width: 50, height: 50)
                                .foregroundColor(.gray)
                        }
                        
                        Text(item.name)
                            .font(.body)
                    }
                }
                .onDelete(perform: deleteItem)
            }
            .navigationTitle("图片待办列表")
            .toolbar {
                EditButton() // 开启编辑删除功能
            }
        }
    }
    
    // 删除条目逻辑
    private func deleteItem(at offsets: IndexSet) {
        store.items.remove(atOffsets: offsets)
    }
}

功能说明： #

• 顶部输入区：支持输入条目名称，点击相册按钮选择图片，点击添加按钮将条目加入列表
• 列表项：显示对应图片（无图片时显示灰色占位图标）和名称
• 编辑功能：通过右上角Edit按钮可删除任意条目

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