swift - 如何在通过算法连续更改 View 状态时动态重新渲染 View ？

Question

我有一个 View 显示标记为 @State 属性的数组的值。 当例如我有一个用于对数组进行排序的按钮，我如何实现 SwiftUI 为排序算法中改变数组值的每个步骤更新屏幕？

在这个测试示例中，我制作了一个使用冒泡排序对数组进行排序的按钮:

struct ContentView: View {
    
    @State private var array = [5,3,6,9,1,2,4,13,3,4,16]
    
    var body: some View {
        
        HStack {
            ForEach(0..<array.count, id: \.self) { i in
                Text("\(array[i])").padding()
            }
        }
        
        Button("Sort") {
            var j = array.count
            while j >= 1 {
                for i in 1..<j {
                    if array[i] < array[i-1] {
                        let temp = array[i-1]
                        array[i-1] = array[i]
                        array[i] = temp
                    }
                }
                sleep(1) // to compensate for the short runtime in this example 
                j -= 1
            }
        }
    }
}

尽管 @State 属性在每个排序步骤中都会发生变化，但为什么 SwiftUI 只重新渲染 View 一次？ 是否有可能以某种方式在屏幕上可视化每个步骤，而不仅仅是看到算法的最终结果？

我希望此行为在运行类似于数独求解器的程序时可视化回溯步骤。在此先感谢您的帮助!

PS:我对 Swift/SwiftUI 很陌生，这也是我在 Stack Overflow 上的第一个问题。如果我不够具体或遗漏了一些明显的东西，我深表歉意!

Answer 1

通过使用sleep，您将阻塞主线程并阻止 UI 更新。相反，您可以使用 DispatchQueue.main.asyncAfter 运行排序的每个连续步骤:

struct ContentView: View {
    
    @State private var array = [5,3,6,9,1,2,4,13,3,4,16]
    @State private var currentElement = 0
    
    var body: some View {
        
        HStack {
            ForEach(array, id: \.self) { i in
                Text("\(i)").padding()
            }
        }
        
        Button("Sort") {
            currentElement = array.count
            withAnimation {
                runSortStep()
            }
        }
    }
    
    func runSortStep() {
        for i in 1..<currentElement {
            if array[i] < array[i-1] {
                let temp = array[i-1]
                array[i-1] = array[i]
                array[i] = temp
            }
        }
        currentElement -= 1
        if currentElement >= 1 {
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                withAnimation {
                    runSortStep()
                }
            }
        }
    }
}

请注意，我还更改了您的 ForEach，以便每个元素都由数组值而非索引标识——否则，您将看不到动画。