view - SwiftUI:如何使用计时器在不同位置创建多个 View ？

Question

在老式 swift 中准备以下任务非常容易:每三秒一个新 View ( subview )出现在新位置。这是一个代码:

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 使许多事情变得更容易，但恐怕不是这一项。至少直到现在我还找不到简单的方法来解决它。有人有什么想法吗？

这是带有结果的屏幕(几秒钟后):

Answer 1

这是可能的方法(使用 Xcode 11.2/iOS 13.2 测试)。 SwiftUI 是响应式概念，因此它不是添加 View 本身，而是向 View 模型和 SwiftUI View 添加一个新位置以响应 View 模型的这种变化，在新添加的位置刷新自身添加新 View (在这种情况下为矩形)。

演示(开始录制的时刻不准确，但会定期添加矩形):



代码:(另见一些内联注释)

   // 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
                }
            }
        }

    }