[SOLVED] Why does preview layout shown in SwiftUI not match layout on phone?

Issue

I am new to SwiftUI and so have just started a project in it.
I have set the display to an iPhone12 as that is currently what I have. I have just completed creating the graphical user interface and when in click run it is all perfect. However, when I run it on my actual phone the entire layout messes up? It used to work but recently it’s varied a lot from the preview. Any idea what’s gone wrong?
Any help would be appreciated

Xcode preview
iPhone preview

import SwiftUI
struct ContentView: View {


//Creating Variables for Topics
@State private var setMemory = false
@State private var setSocialInfluence = false
@State private var setApproaches = false
@State private var setPsychopathology = false
@State private var setBiopsychology = false
@State private var setAttachment = false
@State private var setIssuesandDebates = false
@State private var setSchizophrenia = false
@State private var setResearchMethods = false

//Creating Buttons for Number of Questions
        let buttons = ["10", "20", "30", "40", "50"]
@State public var buttonSelected: Int?

//Creating Variable for 'How To Use' Instructions
@State private var HowToUse = """
1. Select your revision topics
2. Choose how many questions you are able to answer
3. Click the 'continue' button and start revising!
"""
@State private var HowToUse2 = """
Multiple choice questions will appear first. Once you have a score of 5 or over, the difficulty will increase to short-answer questions. If you master these and achieve a score of 25 or above, long-answer questions will appear.
"""
@State private var HowToUse3 = """
All multiple choice questions will be automatically marked. For the harder questions, a student-friendly markscheme will show and you will need to input your score. Be honest!
"""

//Creating Variables for 'Continue' Button
let button = ["Continue"]
@State public var buttonContinue: Int?

var body: some View {
    
//App Logo and Vertical Stacks
    VStack(spacing: 1.0) {
        HStack {
            Image("AppLogo")
                .resizable()
                .scaledToFit()
                .padding(.trailing, 50.0)
            .frame(height: 100, alignment: .topLeading)
            .padding(.top, 55)}
        
//'Topics to Revise' Header
        HStack {
        Text("A-Level Topics")
            .font(.title2)
            .fontWeight(.medium)
            .padding(.top, -20.0)
            .frame(width: 161, height: 10, alignment: .topLeading)
            .padding(.trailing, 198.0)
            
            Text("Click to Revise")
                .padding(.leading, -368.0)
                .padding(.top, 30.0)
                .padding(.bottom, 10.0)
        }
        
//Toggles for Topics
//Used Group{} to Prevent Argument Error
        Group{
        HStack {
            Toggle("Memory",isOn: $setMemory)
                .padding(.leading, -40.0)
                .padding(.top, -5.0)
                .toggleStyle(.button)
                .tint(Color(hue: 0.688, saturation: 1.0, brightness: 1.0))
            Toggle("Social Influence",isOn: $setSocialInfluence)
                .padding(.top, -5.0)
                .toggleStyle(.button)
                .tint(Color(red: 1.0, green: 0.601, blue: 0.783))
                .padding(.leading, 105.0)}

            HStack {
            Toggle("Approaches",isOn: $setApproaches)
                    .padding(.leading, -27.0)
                   .padding(.top, 5.0)
                .toggleStyle(.button)
                .tint(Color(red: 0.629, green: 0.909, blue: 0.527))
            Toggle("Psychopathology",isOn: $setPsychopathology)
                    .padding(.top, 5.0)
                .toggleStyle(.button)
                .tint(Color(red: 0.99, green: 0.862, blue: 0.028))
                .padding(.leading, 76.0)}
        
        HStack {
            Toggle("Biopsychology",isOn: $setBiopsychology)
                .toggleStyle(.button)
                .tint(Color(red: 1.0, green: 0.601, blue: 0.079))
                .padding(.top, 5.0)
                .padding(.leading, -70.0)
            Toggle("Attachment",isOn: $setAttachment)
                .toggleStyle(.button)
                .tint(.cyan)
                .padding(.top, 5.0)
                .padding(.leading, 57.0)}
        
        HStack {
            Toggle("Issues & Debates",isOn: $setIssuesandDebates)
                .padding(.leading, -51.0)
                .padding(.top, 5.0)
                .toggleStyle(.button)
                .tint(Color(red: 0.864, green: 0.879, blue: 0.735))
            Toggle("Schizophrenia",isOn: $setSchizophrenia)
                .toggleStyle(.button)
                .tint(Color(red: 0.722, green: 0.348, blue: 0.7))
                .padding(.top, 5.0)
                .padding(.leading, 36.0)}
        
        HStack {
            Toggle("Research Methods Year 1 & 2",isOn: $setResearchMethods)
                .padding(.leading, -137.0)
                .padding(.top, 5.0)
                .toggleStyle(.button)
            .tint(Color(red: 0.649, green: 0.881, blue: 0.98))}
        .padding(.bottom, 10.0)
        }
        
        
//'Number of Questions' Header
        Group{
        Text("Number of Questions")
            .font(.title2)
            .fontWeight(.medium)
            .foregroundColor(.black)
            .padding(.trailing, 161.0)
        
        Spacer()
        
//Number of Questions - Selected Buttons
        HStack(spacing: 15) {
        ForEach(0..<buttons.count) {button in
                Button(action: {
                    self.buttonSelected = button
                    
                }) {
                    Text("\(self.buttons[button])")
                        .padding()
                        .foregroundColor(.white)
                        .background(self.buttonSelected == button ? Color.black: Color.gray)
                    .clipShape(Capsule())}}
            
        }
    }
        
        Spacer()
        
//'How To Use' Header
        Text("How To Use")
             .font(.title2)
             .fontWeight(.medium)
             .foregroundColor(.black)
             .padding(.trailing, 254.0)

//How To Use Instructions
      VStack{
         Text(HowToUse)
         .fixedSize(horizontal: false, vertical: true)
         .font(.subheadline)
          
          Spacer()
          
          Text(HowToUse2)
              .fixedSize(horizontal: false, vertical: true)
              .font(.subheadline)
              .padding(.leading, 5)
              .padding(.bottom, -6)
          
         Text(HowToUse3)
              .fixedSize(horizontal: false, vertical: true)
              .font(.subheadline)
              .padding(.leading, -2)
          
      }
        
        Spacer()
        
        HStack(spacing: 15) {
        ForEach(0..<button.count) {button in
                Button(action: {
                    self.buttonContinue = button
                    
                }) {
                    Text("\(self.button[button])").padding(.vertical, 12.5)
                        .padding(.horizontal, 120)
                        .foregroundColor(.white)
                        .background(self.buttonContinue == button ? Color.black: Color.gray)
                    .clipShape(Capsule())}}
            
        }
        
        
      .padding(.bottom, 45)
        
    }
    
}


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

Solution

i’ve had an issue like this before and it was a dynamic text size issue. try see if changing the text size on your phone or making sure the text size is not inherited and it might fix it! hope this helps !

Answered By – Blue

Answer Checked By – Dawn Plyler (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published.