SwiftUI ButtonStyle线程切换后按钮状态变更无动画问题求助

问题原因 #

你当前的代码中，从启用切禁用时的状态变更处于视图更新的默认动画上下文里，所以动画生效；但DispatchQueue.main.asyncAfter的回调脱离了这个上下文，直接修改状态不会触发动画。

修复方案1：手动包裹动画上下文 #

在异步回调里修改状态时，用withAnimation包裹，强制触发动画：

.task {
    // 默认状态为启用
    state = .disable // 此处有动画是因为处于视图初始化/更新的动画上下文
    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
        // 用withAnimation包裹状态变更
        withAnimation {
            state = .enable // 现在会触发动画
        }
    }
}

修复方案2：改用SwiftUI原生的禁用状态（更规范） #

自定义ButtonStyle时，直接读取环境变量@Environment(\.isEnabled)，替代自己维护style枚举，SwiftUI会自动处理状态变化的动画，无需手动包裹：

修改后的ButtonStyle：

struct WizardButtonStyle: ButtonStyle {
    @Environment(\.isEnabled) private var isEnabled
    
    func makeBody(configuration: Configuration) -> some View {
        let color: Color = isEnabled ? .black : .gray
        let effect = isEnabled ? 1 : 0.9
        
        configuration.label
            .frame(width: UIScreen.screenWidth - 36, height: 48, alignment: .center)
            .background(.white)
            .foregroundColor(color)
            .cornerRadius(20)
            .overlay {
                RoundedRectangle(cornerRadius: 20)
                    .stroke(color, lineWidth: 3)
            }
            .scaleEffect(effect)
    }
}

修改按钮视图，用.disabled()控制状态，无需自定义buttonStyle枚举：

func wizardButtonView() -> some View {
    let title = "Title"

    Button {
        self.configure.buttonAction()
        // 点击后禁用按钮
        self.configure.isButtonEnabled = false
    } label: {
        Text(title)
            .font(.custom(Fonts.unswer.rawValue, fixedSize: 28))
            .multilineTextAlignment(.center)
            .lineLimit(1)
    }
    .disabled(!self.configure.isButtonEnabled) // 用原生disabled控制状态
    .buttonStyle(WizardButtonStyle())
}

异步回调里直接修改状态即可，无需手动加withAnimation：

.task {
    configure.isButtonEnabled = false
    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
        configure.isButtonEnabled = true // 自动触发动画
    }
}

方案2优势 #

• 符合SwiftUI设计规范，利用原生isEnabled环境变量，无需维护自定义状态枚举
• 自动处理状态变化的动画，无需手动管理动画上下文
• 按钮的交互禁用（如点击无响应）由.disabled()自动处理，不用在点击回调里判断状态

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