[英]Swift UI: App looks different in simulator than on same iPhone model
import SwiftUI
struct ReviewsPageView: View {
@State private var showingSquare = false
var data = ProfileData.getPreviewData()
@State var totalRating = 0.0
@State var numReviews = 40
@State var star5: Double = 0.0
@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var colors = AppData.getData()
var body: some View {
ZStack {
ZStack{
VStack{
LinearGradient(gradient: Gradient(colors: [colors.bright, colors.mid]), startPoint: .topLeading, endPoint: .bottomTrailing)
.frame(width: 500, height: 800)
.ignoresSafeArea()
Spacer()
}
}
VStack {
HStack{
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}, label: {
Image(systemName: "arrow.left")
.foregroundColor(.white)
.font(.title2)
})
Spacer()
Text("REVIEWS")
.foregroundColor(.white)
.font(.headline)
.fontWeight(.semibold)
Spacer()
Image(systemName: "gearshape")
.foregroundColor(.white)
.font(.title2)
}.frame(width: 400)
.padding(.bottom, -5)
ScrollView {
ZStack {
Circle()
.foregroundColor(.white)
.frame(width: 5000)
.offset(x: 0, y: 25)
VStack{
Text("\(String(format: "%.1f",totalRating))")
.fontWeight(.black)
.font(Font.custom(data.font, size: 80))
.padding(.top, 40)
HStack(spacing: 0){
ForEach(0..<Int(totalRating / 1), id: \.self){ _ in
Star(corners: 5, smoothness: 0.38)
.fill(Color.yellow)
.frame(width: 55, height: 55)
.shadow(radius: 1, x: -0.5, y: 1)
}
ZStack{
Star(corners: 5, smoothness: 0.38)
.fill(Color.gray)
.frame(width: 55, height: 55)
Star(corners: 5, smoothness: 0.38)
.fill(Color.yellow)
.frame(width: 55, height: 55)
.shadow(radius: 1, x: -0.5, y: 1)
.overlay(
HStack{
Spacer()
Rectangle()
.foregroundColor(.white)
.frame(width: CGFloat(35 - (totalRating.truncatingRemainder(dividingBy: 1.0)) * 35), height: 55)
.padding(.trailing, 1)
}
)
}
ForEach(0..<4 - Int(totalRating / 1), id: \.self){ _ in
Star(corners: 5, smoothness: 0.38)
.fill(Color.gray)
.frame(width: 55, height: 55)
.shadow(radius: 1, x: -0.5, y: 1)
.opacity(0)
}
}.padding(.top, -30)
.scaleEffect(0.9)
Text("based on \(numReviews) reviews")
.fontWeight(.light)
.font(Font.custom(data.font, size: 20))
.padding(.bottom, 15)
.frame(width: 300)
.foregroundColor(Color("gray"))
HStack{
Text("Excellent")
.font(Font.custom(data.font, size: 17))
.fontWeight(.light)
.foregroundColor(.black)
.padding(.bottom, 5)
Spacer()
ProgressView(value: Double(data.reviewNumbers[4]) / Double(numReviews) * 100, total: 100.0)
.progressViewStyle(LinearProgressViewStyle(tint: Color.green))
.frame(width: 250)
.scaleEffect(x: 1, y: 2, anchor: .bottom)
}.frame(width: 375)
.padding(.bottom, -10)
VStack{
HStack{
Text("Good")
.font(Font.custom(data.font, size: 17))
.fontWeight(.light)
.foregroundColor(.black)
.padding(.bottom, 5)
.multilineTextAlignment(.leading)
Spacer()
ProgressView(value: Double(data.reviewNumbers[3]) / Double(numReviews) * 100, total: 100.0)
.progressViewStyle(LinearProgressViewStyle(tint: Color("lime")))
.frame(width: 250)
.scaleEffect(x: 1, y: 2, anchor: .bottom)
}.frame(width: 375) .padding(.bottom, -10)
HStack{
Text("Average")
.font(Font.custom(data.font, size: 17))
.fontWeight(.light)
.foregroundColor(.black)
.padding(.bottom, 5)
.multilineTextAlignment(.leading)
Spacer()
ProgressView(value: Double(data.reviewNumbers[2]) / Double(numReviews) * 100, total: 100.0)
.progressViewStyle(LinearProgressViewStyle(tint: Color.yellow))
.frame(width: 250)
.scaleEffect(x: 1, y: 2, anchor: .bottom)
}.frame(width: 375)
.padding(.bottom, -10)
HStack{
Text("Below Average")
.font(Font.custom(data.font, size: 17))
.fontWeight(.light)
.foregroundColor(.black)
.padding(.bottom, 5)
.multilineTextAlignment(.leading)
Spacer()
ProgressView(value: Double(data.reviewNumbers[1]) / Double(numReviews) * 100, total: 100.0)
.progressViewStyle(LinearProgressViewStyle(tint: Color.orange))
.frame(width: 250)
.scaleEffect(x: 1, y: 2, anchor: .bottom)
}.frame(width: 375) .padding(.bottom, -10)
HStack{
Text("Poor")
.font(Font.custom(data.font, size: 17))
.fontWeight(.light)
.foregroundColor(.black)
.padding(.bottom, 5)
.multilineTextAlignment(.leading)
Spacer()
ProgressView(value: Double(data.reviewNumbers[0]) / Double(numReviews) * 100, total: 100.0)
.progressViewStyle(LinearProgressViewStyle(tint: Color.red))
.frame(width: 250)
.scaleEffect(x: 1, y: 2, anchor: .bottom)
}.frame(width: 375) .padding(.bottom, -10)
}
// ProgressView(value: CGFloat(data.reviewNumbers[0] / numReviews))
// ProgressView("", value: Double(data.reviewNumbers[0] / numReviews), total: 100)
Rectangle()
.frame(width: 375, height: 1)
.foregroundColor(Color("text"))
.padding(.top, 20)
VStack {
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
}
Spacer()
}
}
}
}
}.onAppear{
numReviews = data.reviewNumbers.reduce(0, +)
totalRating = Double(Double(1*data.reviewNumbers[0] + 2*data.reviewNumbers[1] + 3*data.reviewNumbers[2] + 4*data.reviewNumbers[3] + 5*data.reviewNumbers[4]) / 500.0)
//totalRating = 3.5
}
.navigationBarHidden(true)
}
}
struct ReviewsPageView_Previews: PreviewProvider {
static var previews: some View {
ReviewsPageView()
}
}
Here is my code ^ ^ ^这是我的代码^ ^ ^
When I run the code in the iPhone 11 Xcode simulator it looks great.当我在 iPhone 11 Xcode 模拟器中运行代码时,它看起来很棒。 Here is a picture:这是一张图片:
https://i.stack.imgur.com/IoQNY.png https://i.stack.imgur.com/IoQNY.png
When I run the code on my iPhone 11 it looks awful.当我在 iPhone 11 上运行代码时,它看起来很糟糕。 Here is a picture of that:这是一张照片:
https://i.stack.imgur.com/T98i0.png https://i.stack.imgur.com/T98i0.png
Some text doesn't show.有些文字不显示。 Buttons get cut off.按钮被切断。 Everything is larger than it should be.一切都比它应该的要大。 Why is this happening?为什么会这样?
I am running the code on an IPHONE 11, and in the simulator I also run it on an IPHONE 11, so I don't understand why there would be a problem.我在 IPHONE 11 上运行代码,在模拟器中我也在 IPHONE 11 上运行它,所以我不明白为什么会出现问题。
Any help would be greatly appreciated, thank you!任何帮助将不胜感激,谢谢!
You are using all sorts of hardcoded values:您正在使用各种硬编码值:
.frame(width: 400)
.frame(width: 375)
.frame(width: 375) .padding(.bottom, -10)
Not all phones have a width of 375
or 400
points.并非所有手机的宽度都是375
或400
磅。 Remove these and let SwiftUI figure it out!删除这些并让 SwiftUI 弄清楚! For example, if you want to have something take up the entire screen width, try:例如,如果您想让某些内容占据整个屏幕宽度,请尝试:
.frame(maxWidth: .infinity)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.