SwiftUI canvas 预览为一个视图显示多个视图

Question

我的 SwiftUI 预览将一个视图显示为 3 个不同的预览屏幕，它应该是一个包含组合视图的屏幕...

我做错了什么？

谢谢！

查看 3 个单独预览视图的附件。

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()
    }
}

Answer 1

SwiftUI 预览将显示视图树根部每个节点的预览。当它在预览内部时会更清楚，例如：

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

上面为什么会有3个预览就很清楚了

在您的示例中，正如评论者提到的那样，它发生在您的 SignupSelfie 中，因为您在根部有 3 个节点：

VStack
Spacer()
Text("capture selfie")

我猜你的缩进可能使 Spacer 和 Text 看起来像是在 VStack 中——一个好的技巧是 select您的代码并使用 Ctrl-i 使 Xcode 自动格式化——它会修复这样的缩进问题并揭示问题。

在这种情况下，您可能只想将所有内容都放在 VStack 中。在其他情况下，很高兴知道您也可以通过将多个节点包装在 Group {}

中来避免此问题并将它们变成一个节点

SwiftUI canvas 预览为一个视图显示多个视图

SwiftUI canvas preview displaying multiple views for one view

xcode

ios

swift

swiftui

xcode-previews