SwiftUI中如何在循环中实现视图的实时更新？

我在遍历目录时想添加反馈效果，却发现文本字段要等循环结束后才会更新。下面是能复现相同问题的测试脚本：

struct ContentView: View {
    @State var thing: Int = 0

    var body: some View {
        return VStack {
            VStack {
                Text(String(thing))
                Button("Test") {
                    for i in 1 ... 1000000 {
                        thing = i;
                    }
                }
            }
        }
    }
}

这个脚本里，文本字段同样要等循环完成才会更新，推测视图更新只在代码执行完毕后触发。请问怎么实现视图的持续实时更新？

解决方法 #

问题核心是循环在主线程同步执行，长时间占用主线程会阻塞UI刷新任务，直到循环结束才能处理。要实现实时更新，需把耗时操作移到后台线程，同时确保UI状态更新在主线程执行，还要给UI留出刷新时间。

方法1：用Swift并发框架（推荐） #

利用Task和MainActor将循环放到后台，每次更新状态后短暂休眠，让UI有时间刷新：

struct ContentView: View {
    @State var thing: Int = 0

    var body: some View {
        VStack {
            Text(String(thing))
            Button("Test") {
                Task {
                    for i in 1 ... 1000000 {
                        // 切回主线程更新UI状态
                        await MainActor.run {
                            thing = i
                        }
                        // 休眠1毫秒，可根据需求调整时长
                        try await Task.sleep(nanoseconds: 1_000_000)
                    }
                }
            }
        }
    }
}

方法2：用GCD兼容旧版本 #

如果需要支持Swift 5.5之前的版本，可使用GCD实现后台执行+主线程更新：

struct ContentView: View {
    @State var thing: Int = 0
    // 可选：用于中途取消任务
    private var workItem: DispatchWorkItem?

    var body: some View {
        VStack {
            Text(String(thing))
            Button("Test") {
                workItem?.cancel()
                let newWorkItem = DispatchWorkItem {
                    for i in 1 ... 1000000 {
                        guard !Thread.current.isCancelled else { break }
                        // 主线程更新状态
                        DispatchQueue.main.async {
                            thing = i
                        }
                        // 短暂休眠给UI刷新时间
                        Thread.sleep(forTimeInterval: 0.001)
                    }
                }
                workItem = newWorkItem
                // 后台线程执行循环
                DispatchQueue.global(qos: .userInitiated).async(execute: newWorkItem)
            }
        }
    }
}

关键注意点 #

• 绝对不要在主线程执行长时间任务，会导致UI卡顿甚至无响应。
• 更新@State等UI绑定状态必须在主线程完成，MainActor.run或DispatchQueue.main.async都可实现。
• 必须添加短暂休眠：如果循环执行过快，UI来不及逐一处理刷新请求，最终还是只会显示最后一次更新结果。

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