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

Posted 2023-02-24

【中文标题】SwiftUI 画布预览为一个视图显示多个视图

【英文标题】：SwiftUI canvas preview displaying multiple views for one view

【发布时间】：2021-03-21 16:08:13

【问题描述】：

我的 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()
    

【问题讨论】：

发生这种情况是因为您的 Spacer() 和 Text("capture selfie") 在 VStack 之外。

【参考方案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 内——一个很好的技巧是选择你的代码并使用 Ctrl-i 让 Xcode 自动格式——它会修复这样的缩进问题并揭示问题。

在这种情况下，您可能只想将所有内容都放在VStack 中。在其他情况下，很高兴知道您也可以通过将多个节点包装在 Group 中来避免此问题并将多个节点合二为一。

【讨论】：

感谢您的修复和解释（尽管如此，我个人不知道为什么整个 var body.... 不只是被视为单个节点 - 这不是重点吗？发布的应用程序......？）。在我的例子中，Group 也做了同样的事情，它必须是 ZStack。