SwiftUI中如何通过Button扩展实现全局按钮防重复点击并同步禁用状态

嘿，这个需求太常见了！我之前做SwiftUI项目的时候也纠结过怎么不用每个按钮都手动写防抖逻辑，下面给你两种干净利落的实现方式，都能做到全局复用，还能自动同步按钮的禁用状态：

方案一：自定义防抖Button组件（直接兼容原生写法） #

这个方案的好处是完全兼容原生Button的使用习惯，只是把原来的Button换成我们自定义的DoubleTapPreventingButton就行，不需要额外加Modifier。

实现代码 #

import SwiftUI

// 自定义防抖Button组件
struct DoubleTapPreventingButton<Label: View>: View {
    private let debounceTime: TimeInterval
    private let action: () -> Void
    private let label: Label
    
    @State private var isDisabled = false
    
    init(
        debounceTime: TimeInterval = 1,
        action: @escaping () -> Void,
        @ViewBuilder label: () -> Label
    ) {
        self.debounceTime = debounceTime
        self.action = action
        self.label = label()
    }
    
    var body: some View {
        Button(action: handleTap, label: { label })
            .disabled(isDisabled)
    }
    
    private func handleTap() {
        guard !isDisabled else { return }
        isDisabled = true
        action()
        
        // 延迟指定时间后恢复按钮可点击状态
        DispatchQueue.main.asyncAfter(deadline: .now() + debounceTime) {
            isDisabled = false
        }
    }
}

// 为文本标签的Button添加快捷初始化，和原生写法完全一致
extension DoubleTapPreventingButton where Label == Text {
    init(
        _ titleKey: LocalizedStringKey,
        debounceTime: TimeInterval = 1,
        action: @escaping () -> Void
    ) {
        self.init(debounceTime: debounceTime, action: action) {
            Text(titleKey)
        }
    }
    
    init<S: StringProtocol>(
        _ title: S,
        debounceTime: TimeInterval = 1,
        action: @escaping () -> Void
    ) {
        self.init(debounceTime: debounceTime, action: action) {
            Text(title)
        }
    }
}

使用示例 #

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            // 和原生Button写法完全一样，只是改个组件名
            DoubleTapPreventingButton("普通文本按钮", debounceTime: 1.2) {
                print("普通按钮被点击")
            }
            .buttonStyle(.borderedProminent)
            
            // 自定义标签的按钮也支持
            DoubleTapPreventingButton(debounceTime: 2) {
                print("带图标按钮被点击")
            } label: {
                HStack(spacing: 8) {
                    Image(systemName: "star.fill")
                    Text("带图标按钮")
                }
            }
            .buttonStyle(.bordered)
        }
        .padding()
    }
}

方案二：通过Modifier扩展原生Button（无需替换组件） #

如果不想修改原有代码里的Button组件，这个方案更合适——只需要给原生Button加一个.preventDoubleTap()的Modifier，就能自动添加上防抖和禁用逻辑。

实现代码 #

import SwiftUI

// 防抖工具函数，用于包装原action
private func debouncedAction(
    debounceTime: TimeInterval,
    isDisabled: Binding<Bool>,
    action: @escaping () -> Void
) -> () -> Void {
    return {
        guard !isDisabled.wrappedValue else { return }
        isDisabled.wrappedValue = true
        action()
        
        DispatchQueue.main.asyncAfter(deadline: .now() + debounceTime) {
            isDisabled.wrappedValue = false
        }
    }
}

// 扩展Button，添加防重复点击的Modifier
extension Button {
    func preventDoubleTap(debounceTime: TimeInterval = 1) -> some View {
        self.modifier(DoubleTapPreventionModifier(debounceTime: debounceTime))
    }
}

// 自定义Modifier，负责替换原action并管理禁用状态
private struct DoubleTapPreventionModifier: ViewModifier {
    let debounceTime: TimeInterval
    @State private var isDisabled = false
    
    func body(content: Content) -> some View {
        // 重新创建Button，替换原action为防抖后的版本
        if let button = content as? Button<Label> {
            Button(
                action: debouncedAction(
                    debounceTime: debounceTime,
                    isDisabled: $isDisabled,
                    action: button.action
                ),
                label: { button.label }
            )
            .disabled(isDisabled)
        } else {
            content
        }
    }
}

使用示例 #

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            // 原生Button加个Modifier就行
            Button("原生按钮加防重复") {
                print("原生按钮被点击")
            }
            .preventDoubleTap(debounceTime: 1.5)
            .buttonStyle(.borderedProminent)
            
            // 自定义样式的按钮也完全支持
            Button {
                print("自定义样式按钮被点击")
            } label: {
                Text("自定义样式")
                    .padding()
                    .background(.red)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
            .preventDoubleTap() // 使用默认1秒防抖时间
        }
        .padding()
    }
}

两种方案都能实现你要的效果：点击按钮后自动禁用，直到防抖时间结束，期间重复点击不会触发action。你可以根据自己的项目习惯选一个就行～

备注：内容来源于stack exchange，提问作者cole