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

Posted 2023-02-24

【中文标题】如何将 SwiftUI 视图动态添加到父视图？

【英文标题】：How can I dynamically add SwiftUI Views to a parent View?

【发布时间】：2020-04-08 21:59:44

【问题描述】：

是否可以通过编程方式动态地将多个 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 是否有类似的功能。或者也许有一种我没有看到的更简单的方法？

【参考方案1】：

SwiftUI 是函数式和响应式的，因此它的输出完全是状态的反映。您必须存储和操作状态以生成具有所需结果的 SwiftUI 视图。每次状态更改时，视图都会从头开始重建。 （不是真的，因为引擎盖下有一些有效的差异，但这是一个很好的心智模型。）

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 或使用指向处理你的状态/模型的单独类的属性，用 @ObservedObject 包装器标记，以获得随心所欲。