SwiftUI画布预览显示一个视图的多个视图

Question

我在 SwiftUI 预览中看到了一个视图，被拆成三个预览屏幕展示，实际上应该是一个包含多个视图的屏幕...

请问我做错了什么？

谢谢！

以下是三个独立预览视图的截图：

struct SignupSelfie: View {
    @ObservedObject var signupImagesViewModel = SignupNavigationViewModel()
    @State private var isValid = false
        
    var body: some View {
      
        VStack {
           Button("capture") { /* action code here */ }
              .background(
                  NavigationLink("", destination: SignupIdView(), isActive: $isValid)
                )
            }.navigationBarBackButtonHidden(true)
            Spacer()
            Text("capture selfie")
        }
}


struct SignupSelfie_Previews: PreviewProvider {
    static var previews: some View {
        SignupSelfie()
    }
}

- user14542817

---

这是因为你的Spacer()和Text("capture selfie")在VStack之外。 - NicolasElPapu

Answer 1

SwiftUI 预览将为视图树根节点中的每个节点显示一个预览。当它在预览本身内部时，这更清晰，例如：

struct SignupSelfie_Previews: PreviewProvider {
    static var previews: some View {
        SignupSelfie()
        SignupSelfie2()
        SignupSelfie3()
    }
}

在上述例子中，为什么会有3个预览窗口是很清楚的。

在你的例子中，正如评论者所指出的，在你的SignupSelfie中发生了这种情况，因为你在根目录下有3个节点:

1. VStack
2. Spacer()
3. Text("capture selfie")

我猜想你的缩进可能让Spacer和Text看起来像是在VStack内部--一个好的技巧是选择你的代码并使用Ctrl-i自动格式化，它将解决这样的缩进问题并揭示问题。

在这种情况下，你可能只需要把所有内容放到VStack内。在其他情况下，值得知道的是，你也可以通过将它们包装在Group {}中来避免这个问题并将多个节点转换为一个节点。

- jnpdx

---

感谢您的修复和解释（尽管我个人不明白为什么整个“var body....”不只是被视为单个节点 - 难道这不是在发布应用程序时的目的吗？）。在我的情况下，“Group”也做了同样的事情，必须是“ZStack”。 - Todd