Xcode Preview canvas 不同于 Simulator

Question

我目前正在开发一个应用程序，并且我正在尝试将视图设置为针对不同的屏幕尺寸准确。我在预览中得到了我想要的设计，但是当我在模拟器中运行它时，有些东西有点不对劲。请注意，并非所有屏幕都这样做，只有少数。这可能是什么原因？

截图供参考：Xcode/Simulator Screenshot

内容视图：

struct ContentView: View {
//Removed variables for checking log ins and loading screen animation
var body: some View {
    VStack{
        //Check if logged in and not first time
        if status && !firstTime{
            ZStack{
                NavigationView{
                    TabView(){
                        Tab1View()
                            .environmentObject(ContentViewModel())
                        Tab2View()
                            .environmentObject(ContentViewModel())
                    }
                    .navigationBarHidden(true)
                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                }
                ZStack{
                  //LoadingScreen
                }
                .ignoresSafeArea(edges: .all)
                .onAppear(perform: animateSplash)
                .opacity(endSplash ? 0 : 1)
            }
        } 
          //Check if logged and first time
          else if status && firstTime{
            ZStack{
                NavigationView{
                    if role == "owner"{
                        WelcomeView()
                    } else {
                        WelcomeEmployeeView()
                    }
                }
            }
        } else {
           NavigationView{
              //View in the screenshot
              CreateView()
           }
        }
    }

创建视图：

import SwiftUI
import FirebaseAuth

struct CreateView: View {

@EnvironmentObject var model: ContentViewModel
@State var companyName = ""
@State var employeeName = ""
@State var phoneNumber = ""
@State var show = false
@State var message = ""
@State var alert = false
@State var ID = ""
@State var test = ""
@State var role = "owner"

var body: some View {
    
    ZStack{
        ZStack(alignment: .topTrailing){
            Path{ path in
                path.move(to: CGPoint(x: 500, y: 0))
                path.addLine(to: CGPoint(x: 0, y: 0))
                path.addLine(to: CGPoint(x: 0, y: 80))
                path.addLine(to: CGPoint(x:500, y: 180))
            }
            .fill(LinearGradient(gradient:Gradient(colors: [Color(#colorLiteral(red: 0.6470588235, green: 0.8196078431, blue: 0.7450980392, alpha: 1)), Color(#colorLiteral(red: 0.2549019608, green: 0.7607843137, blue: 0.8588235294, alpha: 1)), .white, .green]), startPoint: .topLeading, endPoint: .bottomTrailing))
            .edgesIgnoringSafeArea(.top)
            Image("icon-white")
                .resizable()
                .frame(width: 50, height: 60)
                .padding(.top)
                .padding(.trailing, 30)
        }
        
        VStack(alignment: .leading){
            Text("Create a")
                .foregroundColor(Color(#colorLiteral(red: 0.2549019608, green: 0.7607843137, blue: 0.8588235294, alpha: 1)))
                .font(.custom("Poppins-Medium", size: 30))
            Text("Company Account")
                .foregroundColor(Color(#colorLiteral(red: 0.2549019608, green: 0.7607843137, blue: 0.8588235294, alpha: 1)))
                .font(.custom("Poppins-Medium", size: 30))
                .padding(.bottom, 30)
                
            
            Text("Company Name")
                .foregroundColor(Color(#colorLiteral(red: 0.2549019608, green: 0.7607843137, blue: 0.8588235294, alpha: 1)))
                .font(.custom("Poppins-Semibold", size: 16))
            TextField("", text: $companyName)
                .frame(width: 290)
                .padding(14)
                .overlay(RoundedRectangle(cornerRadius: 5.0).strokeBorder(Color.black, style: StrokeStyle(lineWidth: 0.5)))
                .padding(.bottom)

            
            Text("Employee Name")
                .foregroundColor(Color(#colorLiteral(red: 0.2549019608, green: 0.7607843137, blue: 0.8588235294, alpha: 1)))
                .font(.custom("Poppins-Semibold", size: 16))
            TextField("", text: $employeeName)
                .frame(width: 290)
                .padding(14)
                .overlay(RoundedRectangle(cornerRadius: 5.0).strokeBorder(Color.black, style: StrokeStyle(lineWidth: 0.5)))
                .padding(.bottom)
            
            Text("Phone Number")
                .foregroundColor(Color(#colorLiteral(red: 0.2549019608, green: 0.7607843137, blue: 0.8588235294, alpha: 1)))
                .font(.custom("Poppins-Semibold", size: 16))
            TextField("", text: $phoneNumber)
                .frame(width: 290)
                .padding(14)
                .overlay(RoundedRectangle(cornerRadius: 5.0).strokeBorder(Color.black, style: StrokeStyle(lineWidth: 0.5)))
                .padding(.bottom)
            
            VStack(alignment: .center){
                
                NavigationLink(
                    destination: VerifcationView(show: $show, ID: $ID, name: $employeeName, companyName: $companyName, phoneNumber: $phoneNumber, hasCode: $test, role: $role), isActive: $show){
                    ZStack{
                        RoundedRectangle(cornerRadius: 5)
                            .foregroundColor(Color(#colorLiteral(red: 0.2549019608, green: 0.7607843137, blue: 0.8588235294, alpha: 1)))
                            .frame(width: 315,height: 50)
                        Button(action: {
                            PhoneAuthProvider.provider().verifyPhoneNumber( "+"+self.phoneNumber, uiDelegate:nil){ (ID, error) in
                                
                                if error != nil {
                                    self.message = (error?.localizedDescription)!
                                    self.alert.toggle()
                                    return
                                }
                                
                                self.ID = ID!
                                self.show.toggle()
                            }
                        }, label: {
                            Text("Create Account")
                                .font(.custom("Poppins-Medium", size: 18))
                                .foregroundColor(.white)
                        })
                        
                    }
                }
                NavigationLink(
                    destination: JoinView()){
                    Text("Join as Employee")
                        .foregroundColor(Color(red: 141/255, green: 141/255, blue: 141/255))
                        .underline(/*@START_MENU_TOKEN@*/true/*@END_MENU_TOKEN@*/, color: Color(red: 141/255, green: 141/255, blue: 141/255))
                }
            }
            .padding(.top)
        }
        .padding(.top)
        
    }
    .navigationBarBackButtonHidden(true)
  }
}

Answer 1

对于 SwiftUI 预览，您只需预览一个视图 - CreateView。这是预览的唯一视图。同时，您的模拟器运行整个应用程序，从您的ContentView 开始。

请注意，在ContentView 中，您将CreateView 包装在NavigationView 中。

NavigationView{
    // View in the screenshot
    CreateView()
}

这将在屏幕顶部添加一个间隙，将其他所有内容向下推（导致您看到的差异）。甚至icon-white 图像也被推到屏幕的白色部分，这就是为什么您在模拟器中看不到它的原因。