Swift UI：应用在模拟器中的外观与在相同 iPhone 模型中的外观不同
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()
}
}
这是我的代码^^^
当我 运行 iPhone 11 Xcode 模拟器中的代码时，它看起来很棒。这是一张图片：
https://i.stack.imgur.com/IoQNY.png
当我 运行 我的 iPhone 11 上的代码看起来很糟糕。这是一张图片：
https://i.stack.imgur.com/T98i0.png
有些文字没有显示。按钮被切断。一切都比它应该的大。为什么会这样？
我 运行 在 IPHONE 11 上编写代码，在模拟器中我也在 IPHONE 11 上 运行 它，所以我不这样做明白为什么会有问题。
任何帮助将不胜感激，谢谢！
您正在使用各种硬编码值：
.frame(width: 400)
.frame(width: 375)
.frame(width: 375) .padding(.bottom, -10)
并非所有手机的宽度都是 375 或 400 点。删除这些并让 SwiftUI 解决！例如，如果你想让一些东西占据整个屏幕宽度，试试：
.frame(maxWidth: .infinity)
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()
}
}
这是我的代码^^^
当我 运行 iPhone 11 Xcode 模拟器中的代码时，它看起来很棒。这是一张图片：
https://i.stack.imgur.com/IoQNY.png
当我 运行 我的 iPhone 11 上的代码看起来很糟糕。这是一张图片：
https://i.stack.imgur.com/T98i0.png
有些文字没有显示。按钮被切断。一切都比它应该的大。为什么会这样？
我 运行 在 IPHONE 11 上编写代码，在模拟器中我也在 IPHONE 11 上 运行 它，所以我不这样做明白为什么会有问题。
任何帮助将不胜感激，谢谢！
您正在使用各种硬编码值：
.frame(width: 400)
.frame(width: 375)
.frame(width: 375) .padding(.bottom, -10)
并非所有手机的宽度都是 375 或 400 点。删除这些并让 SwiftUI 解决！例如，如果你想让一些东西占据整个屏幕宽度，试试：
.frame(maxWidth: .infinity)