SwiftUI：如何使用计时器在不同位置创建多个视图？

debugcn 发表于 Dev

罗曼

可以很容易地以老式的速度准备以下任务：每三秒钟，一个新视图（子视图）将出现在一个新位置。这是一个代码：

import UIKit

class ViewController: UIViewController {

var someView = UIView()
var posX : CGFloat = 10
var posY : CGFloat = 10
var timer:Timer!
var loopCount = 1


override func viewDidLoad() {
    super.viewDidLoad()

    startTimer()
    view.backgroundColor = .purple

}

func setView() {
    someView = UIView(frame: CGRect(x: posX, y: posY, width: 10, height: 10))
    someView.backgroundColor = UIColor.orange
    view.addSubview(someView)
}

func startTimer() {
    if timer == nil {
        timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(loop), userInfo: nil, repeats: true)
    }
}

@objc func loop(){
    if (loopCount % 3 == 0) {
        posX += 15
        posY += 15
        setView()
    }
    loopCount += 1
 }


 }

SwiftUI使许多事情变得容易得多，但是恐怕没有这一点。至少到目前为止，我还没有找到一种简单的方法来解决它。有人知道吗？

这是显示结果的屏幕（几秒钟后）：

他的脾气

这是可行的方法（已通过Xcode 11.2 / iOS 13.2测试）。SwiftUI是反应性的概念，因此它不是在视图模型中添加新位置，而是在视图模型和SwiftUI视图中添加了新位置，以响应视图模型中的此更改而在新添加的位置处刷新自身并添加新视图（在本例中为Rectangle）。

演示（开始录制的时间不准确，但是会定期添加rect）：

在此处输入图片说明

代码：（另请参见一些内联注释）

   // needed to use as ID in ForEach
    extension CGPoint: Hashable {
        public func hash(into hasher: inout Hasher) {
            hasher.combine(self.x)
            hasher.combine(self.y)
        }
    }

   // View model holding and generating new positions
    class DemoViewModel: ObservableObject {
        @Published var positions = [CGPoint]() // all points for view

        private var loopCount = 0
        func loop() {
            if (loopCount % 3 == 0) {
                if let last = positions.last { // generate new point
                    positions.append(CGPoint(x: last.x + 15, y: last.y + 15))
                } else {
                    positions.append(CGPoint(x: 10, y: 10))
                }
            }
            loopCount += 1
        }
    }

    struct DemoAddingView: View {
        @ObservedObject var vm = DemoViewModel()

        let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
        var body: some View {
            ZStack {
                ForEach(vm.positions, id: \.self) { position in
                    Rectangle().fill(Color.orange) // just generate a rect view for all points
                        .frame(width: 10, height: 10)
                        .position(position) // location of rect in global coordinates
                }
                .onReceive(timer) { _ in
                    self.vm.loop() // add next point
                }
            }
        }

    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。