如何将 SwiftUI 视图动态添加到父视图？

Question

是否可以以动态和编程方式将多个 SwiftUI 视图添加到父视图？

例如，假设我们有一个基本视图，例如：

struct MyRectView: View {
    var body: some View {
        Rectangle()
            .fill(Color.red)
            .frame(width: 200, height: 200)
    }
}

一个 Button 定义为：

struct MyButtonThatMakesRects: View {

    var body: some View {
        Button(
            action: {
                // Create & add Views to parent here?
                // ...
            },
            label: {
                Text("tap to create a Rect")
            }
        )
    }
}

当点击MyButtonThatMakesRects时，有什么方法可以在父视图中创建多个MyRectView实例？

我最初的想法与我将如何在 UIKit 中执行此操作一致。 正在点击按钮，创建一个新的UIView() ，然后使用.addSubview(...)将其添加到父级。 不确定 SwiftUI 是否具有类似的功能。 或者也许有一种我没有看到的更简单的方法来做到这一点？

Answer 1

SwiftUI 是函数式和反应式的，所以它的 output 完全是 state 的反映。 您必须存储和操作 state 以产生具有所需结果的 SwiftUI 视图。 每次 state 更改时，视图都会从头开始重建。 （不是真的，因为引擎盖下有一些有效的差异，但它是一个很好的心理 model 使用。）

SwiftUI 提供的最简单方法是@State属性包装器，因此您要求的版本看起来像这样：

struct RootView: View {
    @State private var numberOfRects = 0

    var body: some View {
        VStack {
            Button(action: {
                self.numberOfRects += 1
            }) {
                Text("Tap to create")
            }
            ForEach(0 ..< numberOfRects, id: \.self) { _ in
                MyRectView()
            }
        }
    }
}

我猜你想要的最终结果比这更复杂，但你可以使用@State或使用指向一个单独的 class 的属性来处理你的状态/模型，用@ObservedObject包装器标记，以获得你需要的任何东西。