ios - Xcode Preview canvas 不同于 Simulator
问题描述
我目前正在开发一个应用程序,并且我正在尝试将视图设置为针对不同的屏幕尺寸准确。我在预览中得到了我想要的设计,但是当我在模拟器中运行它时,有些东西有点不对劲。请注意,并非所有屏幕都这样做,只有少数。这可能是什么原因?
截图供参考: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)
}
}
解决方案
对于 SwiftUI 预览,您只需预览一个视图 - CreateView
. 这是唯一可以预览的视图。同时,您的模拟器运行整个应用程序,从您的ContentView
.
请注意,在里面ContentView
,你包裹CreateView
在一个NavigationView
.
NavigationView{
// View in the screenshot
CreateView()
}
这将在屏幕顶部添加一个间隙,将其他所有内容向下推(导致您看到的差异)。甚至icon-white
图像也被推到屏幕的白色部分,这就是为什么您在模拟器中看不到它的原因。
推荐阅读
- c - 如何对齐C中的列
- c# - (C#) 当你想创建一个继承类时,你如何处理带有构造函数的基类?
- python - 提升地图的python向量..(结构)..不走运
- python - 向 TensorFlow 2.0 添加 Concatenated 层(使用 Attention)
- unit-testing - boto3.client(ec2-instance-cpnnect).send_ssh_public_key 的模拟测试失败
- python - 复杂数据框的多级 Pandas 迭代
- javascript - 如何检查 Javascript 中复杂对象中是否存在键?
- php - 自定义帖子类型存档重定向到主页
- sql - 哪个 SQL 表包含 WordPress 多站点中主站点的用户?
- reactjs - 使用 React 存储令牌