SwiftUI自定义组件如何实现带回调的.onDelete式链式修饰符？

我来帮你搞定这个需求！要让自定义组件MyComponent支持像.onDelete那样的链式调用，核心是利用Swift值类型的特性，在扩展方法里创建组件副本、修改状态并存储回调闭包，同时保证方法返回Self来维持链式调用的能力。下面一步步来实现：

第一步：修改MyComponent的定义，添加必要属性 #

首先，我们需要给MyComponent添加一个私有属性来存储回调闭包，同时显式声明初始化器（因为添加了私有属性，Swift自动生成的初始化器会失效）：

struct MyComponent: View {
    @Binding var alert: String
    // 私有属性，用于存储回调闭包
    private var actionHandler: (() -> Void)?
    
    // 显式初始化器，绑定alert参数
    init(alert: Binding<String>) {
        self._alert = alert
        self.actionHandler = nil
    }
    
    var body: some View {
        // 这里是你的组件内容，比如可以加个按钮来触发回调
        Button("触发操作") {
            // 当用户交互时，执行存储的回调
            actionHandler?()
            // 也可以在这里同步修改alert状态
            alert = "操作已触发"
        }
    }
}

第二步：扩展MyComponent，实现链式方法 #

接下来在扩展里实现你需要的.foo()方法（包括无参数和带回调的版本），以及类似.onDelete的方法：

extension MyComponent {
    // 无参数的foo方法：直接修改alert状态
    func foo() -> Self {
        var copy = self
        copy.alert = "state 2"
        return copy
    }
    
    // 带回调参数的foo方法：修改alert+存储回调
    func foo(action: @escaping () -> Void) -> Self {
        var copy = self
        copy.alert = "state 3" // 设置对应的状态值
        copy.actionHandler = action // 存储传入的回调
        return copy
    }
    
    // 类似原生onDelete的链式方法：专门处理删除回调
    func onDelete(perform action: @escaping () -> Void) -> Self {
        var copy = self
        copy.actionHandler = action
        // 可选：如果需要同步修改alert状态可以加在这里
        // copy.alert = "即将执行删除操作"
        return copy
    }
}

第三步：在ContentView中使用链式调用 #

现在你就可以像预期那样在ContentView里调用这些链式方法了：

struct ContentView: View {
    @State private var alert1 = "state 1"
    @State private var alert2 = "state 1"
    @State private var alert3 = "state 1"
    
    // 自定义的回调函数
    private func actionFunction() {
        print("执行自定义操作啦！")
    }
    
    var body: some View {
        VStack(spacing: 20) {
            // 基础使用：alert保持初始状态
            MyComponent(alert: $alert1)
            Text(alert1)
            
            // 调用无参数foo：alert被改为"state 2"
            MyComponent(alert: $alert2).foo()
            Text(alert2)
            
            // 调用带回调的foo：alert改为"state 3"，点击按钮触发actionFunction
            MyComponent(alert: $alert3).foo(action: actionFunction)
            Text(alert3)
            
            // 也可以用onDelete风格的调用
            MyComponent(alert: $alert3)
                .onDelete(perform: {
                    print("执行删除操作！")
                })
        }
        .padding()
    }
}

关键知识点 #

• 链式方法必须返回Self：这样才能保证调用完一个方法后还能继续调用其他方法，不能像你之前那样返回Void。
• 值类型的副本修改：因为struct是值类型，我们不能直接修改self，所以要创建一个self的副本，修改副本的属性后返回。
• 回调闭包的存储：需要在组件内部添加一个可选闭包属性，用来存储传入的回调逻辑，在合适的时机（比如按钮点击）触发。

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