Как я могу динамически добавлять SwiftUI Views в родительский View?

Question

Можно ли динамически и программно добавить несколько представлений SwiftUI к родительскому представлению?

Например, предположим, что у нас есть базовое представление c, например:

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

И Кнопка определена как:

struct MyButtonThatMakesRects: View {

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

Можно ли как-нибудь создать несколько экземпляров MyRectView в родительском представлении при нажатии MyButtonThatMakesRects?

Мое первоначальное мышление соответствовало как бы я это сделал в UIKit. Находясь на нажатии кнопки, создайте новый UIView(), а затем используйте .addSubview(...), чтобы добавить его к родителю. Не уверен, что SwiftUI имеет аналогичную функциональность. Или, может быть, есть более простой способ сделать это, которого я не вижу?

Answer 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 упаковкой, чтобы получить то, что вам нужно.