SwiftUI onTapGesture触发主线程任务时@State更新UI异常问题

问题根因 #

原代码存在两处会导致UI更新异常的问题：

• @State 修饰的状态属性必须在主线程修改，原代码在后台队列直接修改isLoading，会触发SwiftUI UI更新告警，甚至导致状态错乱
• 原代码将sleep(3)这类阻塞操作放在主队列执行，会直接卡住主线程，UI来不及刷新为加载指示器就被阻塞，阻塞结束后直接跳回箭头图标，完全看不到加载效果

正确实现逻辑 #

状态切换和耗时任务需要严格遵循以下执行顺序：

• 点击图标后，先在主线程将isLoading设为true，触发UI切换到ProgressView加载状态
• 将所有耗时操作（网络请求、大文件计算、数据处理等）放到后台线程执行，避免阻塞主线程
• 后台耗时任务执行完成后，切回主线程将isLoading设为false，切回箭头图标展示

修复后代码 #

struct TestAnimation: View {
    @State var isLoading: Bool = false
    var body: some View {
        if !isLoading {
            Image(systemName: "arrow.down.circle.fill")
                .font(.system(size: 35))
                .padding()
                .foregroundColor(.blue)
                .imageScale(.large)
                .onTapGesture {
                    doBackgroundTask()
                }
        } else {
            ProgressView()
                .progressViewStyle(CircularProgressViewStyle(tint: .blue))
                .padding(30)
                .scaleEffect(3)
        }
    }
    
    func doBackgroundTask(){
        // 主线程更新加载状态，UI立刻响应
        isLoading = true
        // 耗时任务扔到后台线程执行，不阻塞UI
        DispatchQueue.global(qos: .userInitiated).async {
            // 此处替换为实际业务耗时逻辑，示例用sleep模拟
            sleep(3)
            // 任务完成后切回主线程更新状态
            DispatchQueue.main.async {
                isLoading = false
            }
        }
    }
}

现代Swift语法简化实现 #

如果项目支持Swift Concurrency，可以用Task写法避免GCD的嵌套回调，逻辑更清晰：

// onTapGesture 中的实现替换为以下代码即可
.onTapGesture {
    Task { @MainActor in
        isLoading = true
        // 后台执行耗时任务
        await Task.detached(priority: .userInitiated) {
            sleep(3) // 替换为实际耗时业务逻辑
        }.value
        isLoading = false
    }
}

注意事项 #

• 禁止在主线程执行阻塞操作：不要在主线程跑sleep、同步大文件读写、大批量数据计算这类逻辑，会直接导致UI冻住，甚至触发系统看门狗强杀应用
• 所有会驱动UI更新的状态属性（@State、@ObservedObject、@EnvironmentObject等），必须在主线程修改

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