App appears on two devices on preview

Question

Created Jun ’21

Replies 2

Boosts 0

Views 2.4k

Participants 3

When I preview my app in Xcode, it shows up on two different preview simulators/devices. Then, when I actually run it it appears glitched out. Here is my code:

import SwiftUI

struct ContentView: View {
  @State var showDetailsScience = false
  @State var showDetailsMath = false
  @State var showDetailsELA = false
  @State var showDeatailsSocial = false
  var body: some View {
    VStack {
        Text("Core Subjects")
          .font(.largeTitle)
          .fontWeight(.bold)
          .position(x: 120 , y: 30)
          .padding(0)
    }
  NavigationView {
    VStack {
        Spacer ()
      NavigationLink(
      destination: ScienceView(),
        label: {          Image ("Science")
          .cornerRadius(25)
          .position(x: 290, y: 18)
        }
          )
      NavigationLink(
      destination: MathView(),
        label: {
        Image ("Math")
          .cornerRadius(25)
          .position(x: 100, y: -145)
          }
        )
      NavigationLink(
      destination: ELAView(),
        label: {
          Image ("ELA")
            .cornerRadius(25)
            .position(x: 100, y: -100)
          }
        )
      NavigationLink(
      destination: SocialStudiesView(),
        label: {
        Image ("SocialStudies")
          .cornerRadius(25)
          .position(x: 290, y: -265)
           

          }
        )
      }
    }
  }
}
struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
        }
}

Here are some images:

Screen Shot 2021-06-09 at 5.42.44 PM.png

If anyone knows how to fix this please let me know, as I am very desperate

Boost

Answer 1

Developer Tools Engineer OP

Apple

Jun ’21

Hi,

Thanks for reaching out to us. Hopefully we can help you get closer to the behavior you desire.

regarding it shows up on two different preview simulators/devices :
The body property of a View has an implicit @ViewBuilder annotation attached to it which enables it to accept an immediate "array" of top level views. When it encounters this at runtime it will insert a VStack on your behalf. This does not happen in the previews case, which is why you see the difference. When Previews attempts to resolve the PreviewProvider s entries it tries to figure out if you wanted a single preview or multiple entries. In your case here it is interpreting that "array" of views in your ContentView s body as a desire to have multiple. If you wrap the body content in the VStack that SwiftUI is inserting for you at runtime then that should collapse your previews in to a single entry.

regarding when I actually run it it appears glitched out:
I am guessing you are referring to how the items in your "grid" overlap each other. It seems you are trying to use offsets to move the items such that they are in a grid. Would you perhaps be better served by just using the built in grid container type that SwiftUI offers? Learn more about those at the Stacks, Grids, and Outlines in SwiftUI wwdc talk from last year.

Hope this helps!

1

Answer 2

Arrioja19 OP

Aug ’21

I believe this is due to the closing bracket on the first VStack, I ran into the same issue and changing the placement of the closing bracket fixed it.

0