为什么 SwiftUI 中显示的预览布局与 phone 上的布局不匹配？
Why does preview layout shown in SwiftUI not match layout on phone?
我是 SwiftUI 的新手，所以刚刚开始了一个项目。
我已将显示设置为 iPhone12，因为这是我目前拥有的。我刚刚完成了图形用户界面的创建，当单击 运行 时一切都很完美。但是，当我 运行 它在我实际的 phone 上时，整个布局都乱七八糟了？它曾经有效，但最近它与预览版有很大不同。知道出了什么问题吗？
任何帮助将不胜感激
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()
}
}
}
您需要就不同屏幕尺寸时发生的情况做出一些决定。现在，您有一些代码可以在一种屏幕尺寸上运行，但如果有任何微小的变化，就会有点脆弱。
在您当前的代码中，您似乎希望 View 下部的 Text 项与 View 的前缘对齐。为此，您需要在 VStack 上设置 alignment。但是，不清楚您是希望所有标题也以这种方式对齐，还是仅 sub-items.
以下是您要进行的修改类型的示例：
VStack(alignment: .leading) { //<-- Note the leading here
Text(HowToUse)
.fixedSize(horizontal: false, vertical: true)
.font(.subheadline)
Spacer()
Text(HowToUse2)
.fixedSize(horizontal: false, vertical: true)
.font(.subheadline)
.padding(.bottom, -6)
//<-- Remove leading padding
Text(HowToUse3)
.font(.subheadline)
.fixedSize(horizontal: false, vertical: true)
//<-- Remove leading padding
}
您必须考虑的另一个问题是，如果屏幕不够高，无法容纳您的 View 会发生什么情况——这可能发生在较小的设备上，或者如果用户打开了辅助功能设置例如，增加字体大小。您很可能希望将您的内容嵌入 ScrollView 以说明这一点。
就预览与设备的不同之处而言，可能是预览 returns 屏幕或安全区域的尺寸略有不同。无论如何，这实际上可能是一件好事，因为它暴露了当前布局中的一些潜在脆弱性。
我以前遇到过这样的问题，这是一个动态文本大小问题。尝试查看是否更改 phone 上的文本大小或确保文本大小未被继承并且它可能会修复它！希望这有帮助！
我是 SwiftUI 的新手，所以刚刚开始了一个项目。 我已将显示设置为 iPhone12，因为这是我目前拥有的。我刚刚完成了图形用户界面的创建，当单击 运行 时一切都很完美。但是，当我 运行 它在我实际的 phone 上时，整个布局都乱七八糟了？它曾经有效，但最近它与预览版有很大不同。知道出了什么问题吗？ 任何帮助将不胜感激
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()
}
}
}
您需要就不同屏幕尺寸时发生的情况做出一些决定。现在，您有一些代码可以在一种屏幕尺寸上运行，但如果有任何微小的变化，就会有点脆弱。
在您当前的代码中，您似乎希望 View 下部的 Text 项与 View 的前缘对齐。为此，您需要在 VStack 上设置 alignment。但是，不清楚您是希望所有标题也以这种方式对齐，还是仅 sub-items.
以下是您要进行的修改类型的示例：
VStack(alignment: .leading) { //<-- Note the leading here
Text(HowToUse)
.fixedSize(horizontal: false, vertical: true)
.font(.subheadline)
Spacer()
Text(HowToUse2)
.fixedSize(horizontal: false, vertical: true)
.font(.subheadline)
.padding(.bottom, -6)
//<-- Remove leading padding
Text(HowToUse3)
.font(.subheadline)
.fixedSize(horizontal: false, vertical: true)
//<-- Remove leading padding
}
您必须考虑的另一个问题是，如果屏幕不够高，无法容纳您的 View 会发生什么情况——这可能发生在较小的设备上，或者如果用户打开了辅助功能设置例如，增加字体大小。您很可能希望将您的内容嵌入 ScrollView 以说明这一点。
就预览与设备的不同之处而言，可能是预览 returns 屏幕或安全区域的尺寸略有不同。无论如何，这实际上可能是一件好事，因为它暴露了当前布局中的一些潜在脆弱性。
我以前遇到过这样的问题，这是一个动态文本大小问题。尝试查看是否更改 phone 上的文本大小或确保文本大小未被继承并且它可能会修复它！希望这有帮助！