swiftui - VStack 低于预期的 SwiftUI
问题描述
尽管在预览版中,当我在模拟器或手机上运行应用程序时,VStack 看起来很有希望,但它看起来比预期的要低。通过比较两张图像,您可以看到视图的前导存在很大差距。我还添加了图层的图像以帮助您理解问题。我显然无法理解。
预览中
在模拟器中
图层
代码
var body: some View {
// NavigationView {
ZStack(alignment: .leading) {
Image("stepsTabBG")
.resizable()
.ignoresSafeArea(.all)
VStack {
HStack {
ScrollView(.horizontal) {
HStack(spacing: 30) {
ForEach(steps, id: \.id) { day in
Text("\(Calendar.current.dateComponents([.day], from: day.date).day!)")
.onTapGesture {
selectedDay = day
}
}
}
}
.frame(width: UIScreen.main.bounds.width / 2)
.padding(10)
Spacer()
}
CircularProgress(steps: selectedDay.count)
// Text(selectedDay.date, style: .date)
// .font(Font.custom("SFCompactDisplay", size: 14))
// .foregroundColor(Color(#colorLiteral(red: 0.4392156863, green: 0.4392156863, blue: 0.4392156863, alpha: 1)))
// .padding()
HStack {
Text("Min 500")
.padding()
.padding()
Text("Max 15000")
}
.font(Font.custom("SFCompactDisplay", size: 14))
.foregroundColor(Color(#colorLiteral(red: 0.4392156863, green: 0.4392156863, blue: 0.4392156863, alpha: 1)))
Text("BLA BLA BLA")
.font(Font.custom("SFCompactDisplay-Bold", size: 34))
.foregroundColor(Color(#colorLiteral(red: 0.4392156863, green: 0.4392156863, blue: 0.4392156863, alpha: 1)))
.padding()
Text("Bla bla bla")
.font(Font.custom("SFCompactDisplay", size: 14))
.foregroundColor(Color(#colorLiteral(red: 0.4392156863, green: 0.4392156863, blue: 0.4392156863, alpha: 1)))
Spacer()
}
.frame(maxWidth: .infinity, alignment: .topLeading)
}
// }
.onAppear() {
if let healthStore = healthStore {
healthStore.requestAuthorization { (success) in
if success {
healthStore.calculateSteps { (statisticsCollection) in
if let statisticsCollection = statisticsCollection {
updateUIFromStatistics(statisticsCollection)
}
}
}
}
}
}
}
}
我在欢迎页面中有一个 NavigationView。我正在使用该 NavigationView 能够单击登录或注册按钮。
struct WelcomeView: View {
@State var isLogin : Bool = false
@State var isRegister : Bool = false
var body: some View {
NavigationView {
VStack {
ZStack(alignment: .top) {
Image("Welcomebg")
.resizable()
// .aspectRatio(contentMode: .fit)
.edgesIgnoringSafeArea(.all)
Image("WelcomeImage")
.padding(.vertical, 30)
HStack {
Text("Walker")
Image("logo")
Text("App")
}
.font(Font.custom("SFCompactDisplay-Bold", size: 16))
.foregroundColor(.black)
}
Spacer()
Text("Title")
.font(Font.custom("SFCompactDisplay-Bold", size: 30))
Text("Description")
.font(Font.custom("SFCompactDisplay", size: 16))
.foregroundColor(.gray)
.padding(.vertical, 20)
Spacer()
NavigationLink("", destination: LoginView(), isActive: $isLogin)
Button(action: {
self.isLogin.toggle()
}) {
Text("GIRIS YAP")
.foregroundColor(.white)
.padding(.vertical,25)
.padding(.horizontal,UIScreen.main.bounds.width / 3)
.font(Font.custom("SFCompactDisplay-Bold", size: 14))
}
.background(Color("ColorOnboarding"))
.clipShape(Capsule())
.padding(.top,20)
HStack {
Text("HESABINIZ YOK MU?")
.foregroundColor(.gray)
NavigationLink("", destination: SignupView(), isActive: $isRegister)
Button(action: {
self.isRegister.toggle()
}) {
Text("UYE OL")
.foregroundColor(Color("ColorOnboarding"))
.padding(.vertical,25)
}
}
.font(Font.custom("SFCompactDisplay", size: 14))
}
.navigationBarHidden(true)
}
}
}
解决方案
空白区域看起来像automatic
mode 中的空导航栏标题(在本例中为large
)。
尝试.navigationBarTitleDisplayMode(.inline)
在此视图中设置(这不会修改父视图):
var body: some View {
ZStack(alignment: .leading) {
// ...
}
.navigationBarTitleDisplayMode(.inline)
}
推荐阅读
- jquery - 仅使用 jquery 获取由 css 隐藏的可见单词
- java - Java将arraylist添加到对象?《飞行值机练习》
- javascript - Django 应用程序中 javascript 和 jquery 模块的 UI
- textures - 从 Meshlab 导出带有纹理的 .obj?
- java - 在 golang os/exec 中使用外部库 .jar 运行 java .class 文件
- javascript - JavaScript - 无法读取未定义的属性“顶部”
- wpf - 为 WPF 应用程序创建安装程序
- javascript - 无法通过 Angular 管道搜索对象数组值
- angular - 无法加载资源:Ionic 4 中的 net::ERR_CLEARTEXT_NOT_PERMITTED
- python - 如何结合两个音频并在机器学习中训练它们