ios - 在 swiftUI 中是否可以使用按钮在屏幕上添加新 View ？

Question

每次点击按钮时，我都希望出现一个新的cardView。我想知道这在 swiftUI 中是否可行，如果可以，我需要采取什么行动。如果我能够将一些参数传递给 cardView 结构，那就更好了，但任何帮助都会很棒!

struct ContentView: View {
    var body: some View {
        ZStack {
            VStack {
                TextButton(action: {print("Button tapped")}, text: "new card")
                CardView()
            }
        }
    }
}

struct CardView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color(#colorLiteral(red: 0.7450980544, green: 0.1568627506, blue: 0.07450980693, alpha: 1)))
                .frame(width: 100, height: 100 * 1.618)
                .cornerRadius(16)
                .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)).opacity(0.1), radius: 1, x: 0, y: 1)
                .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)).opacity(0.2), radius: 10, x: 0, y: 10)

            VStack {
                Text("Card")
                    .font(.system(size: 10) )
                    .foregroundColor(.white)
                    .bold()
            }
        }
    }
}


struct TextButton: View {
    let action: () -> Void
    let text: String

    var body: some View {
        Button(action: action, label: {
            Text(text)
                .padding(.horizontal, 16)
                .padding(.vertical, 16)
                .foregroundColor(.white)
                .background(Color.blue)
                .cornerRadius(.infinity)
                .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)).opacity(0.1), radius: 1, x: 0, y: 1)
                .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)).opacity(0.2), radius: 10, x: 0, y: 10)
        })
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
} ```

Answer 1

在 SwiftUI 中，View 反射(reflect)了 State 数据，所以你不要直接修改 View，而是修改 State 数据，并根据 State 构建 View。这是 SwiftUI 背后的核心原则，它允许您将 View 关注点与驱动它的数据分开(某些行话中的 ViewModel)。

因此，假设我们有一个 Card 的数据模型(使其符合 Identifying - 这将在稍后需要):

struct Card: Identifiable {
  let id = UUID()
  let name: String
}

让我们将卡片数组定义为 View 中的状态变量:

@State private var cards: [Card] = [Card(name: "foo")]

然后主体可以使用 ForEach 或在 List View 中显示这些卡片:

var body = some View {
  VStack() {
    Button("Add Card") {
       self.cards.append(Card(name: "I'm an added card"))
    }
    ForEach(cards) { card in
       CardView(for: card) // if your CardView had parameters
    }
  }
}

发生的情况是按钮的闭包将一个新的 Card 实例添加到 cards 状态变量中。就是这样。它不会直接更改 View 中的任何内容。 View 看到变化(这就是 SwiftUI 在幕后所做的事情)并重新渲染自身。

您需要一张Card 来符合Identifying 的原因是让ForEach 知道如何唯一地标识每张卡片。在不符合可识别性的情况下，您可以使用如下所示的关键路径:

ForEach(cards) { card in
  // ...
}