时间戳

首页 > 解决方案 > 如何在循环中更新状态时显示所有中间视图，swiftUI

swiftui - 如何在循环中更新状态时显示所有中间视图，swiftUI

问题描述

如何强制视图更新以反映所有 @State 更改，但不从初始跳转到最后一个？

    import SwiftUI

struct ContentView: View {

    @State var counter = 0

    func updatecounter(){
        for _ in 1...10{withAnimation(.easeInOut(duration: 1)){counter+=1}}
    }

    var body: some View {
        VStack {
            Spacer()
            Text("Counter: \(self.counter)")
            Spacer()
            Button(action: {self.updatecounter()}){Text("Update Counter")}
            Spacer()
        }
    }
}

struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()}}

我希望上面的代码在单击按钮时显示从 1 到 10 的所有数字（1、2、3、4、5 ...），而不是像当前那样立即从 1 跳到 10。

谢谢！

标签： swiftui

解决方案

您可以添加一个 Timer 发布者来在 SwiftUI 中制作顺序动画：

                   import Combine

          @State var counter = 0
          @State  var cancelable : AnyCancellable?

            func updatecounter(){

                 cancelable   =    Timer.publish(every: 1, on: RunLoop.main, in: RunLoop.Mode.default).autoconnect().sink { (Date) in
                     withAnimation(Animation.easeInOut(duration: 1)){
                        self.counter += 1
                    }
                    if self.counter == 10 {
                              self.cancelable?.cancel() }
                    }
                }

推荐阅读