ios - 细节视图顶部的额外空间不会消失 (SwiftUI)
问题描述
我在详细视图中有一个不会消失的额外空间。该视图来自 NavigationLink,但我尝试过使用或不使用 NavigationView。我试图用 NavigationView 替换 ScrollView 来包装它,但这没有用。我认为很多 Swift 编码人员都遇到过这个问题,并且没有适合我的正确答案。
这是我的 DetailView
struct DetailView: View {
var body: some View {
ScrollView {
VStack(alignment: .leading) {
Text("Huge Font Recipe Title")
.font(.system(size: 48, weight: .bold))
.foregroundColor(.black)
.padding([.leading, .top, .trailing])
VStack {
Image("img1")
.resizable()
.frame(width: 375, height: 375)
.aspectRatio(contentMode: .fit)
.frame(width: UIScreen.main.bounds.width)
Spacer()
}.padding(.bottom)
}
}
}
}
struct DetailView_Previews: PreviewProvider {
static var previews: some View {
DetailView()
}
}
这是包含 NavigationView 的父视图(内容视图)
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
ScrollView (showsIndicators: false) {
VStack(spacing: 20) {
ForEach(recipecardData) { item in
NavigationLink(
destination: DetailView()) {
RecipeCards( card: item)
}
}
}
}
.navigationBarTitle("Navigation")
}
}
}
struct RecipeCards: View {
var card: RecipeCard
var body: some View {
ZStack {
Image(card.imageName)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 334, height: 335)
.cornerRadius(10)
.padding()
.shadow(radius: 16)
Rectangle()
.foregroundColor(.clear)
.background(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .bottom, endPoint: .top)
)
.frame(width: 334, height: 335)
.cornerRadius(10)
HStack {
Text(card.title)
.font(.system(size: 27,weight: .bold))
.foregroundColor(.white)
.frame(minWidth: 10, maxWidth: .infinity, alignment: .leading)
.lineLimit(2)
.padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 20))
}
.padding(.bottom, 268)
.padding(EdgeInsets(top: 0, leading: 34, bottom: 0, trailing: 8))
}
}
}
struct RecipeCard: Identifiable {
var id = UUID()
var title: String
var imageName: String
}
let recipecardData = [
RecipeCard(title: "Title 1", imageName: "img1"),
RecipeCard(title: "Title 2", imageName: "img2")
]
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
解决方案
那是NavigationBar
有large
风格的。您可以使用此修饰符使其更小:
.navigationBarTitle("Title", displayMode: .inline)
由于OP的评论而更新
如果你想在扩展内容的同时保持大标题,你应该考虑忽略安全区域的top
边缘:
.edgesIgnoringSafeArea(.top)
此外,您可能希望在忽略安全区域之前padding
添加一些s以保留导航大小。inline
重要的
请注意,所有这些修饰符都应应用于目标视图。
将
NavigationBar
留在那里并防止触摸事件传递到下面的视图。.navigationBarHidden(true)
如果你真的需要摆脱它,你应该使用它。
推荐阅读
- spring-security - Spring Cloud Config 服务器认证
- c# - Devexpress 主详细信息
- docker - Jenkins 的 K8s 插件:始终在一个 pod 内运行两个单独的容器
- sparql - DBpedia 检索的 Sparql 查询问题
- ruby-on-rails - Rails 应用程序中的自定义迁移失败
- android - Eddystone,getBeaconAdvertisementData(beacon) 是什么意思?
- java - WorkManager 找不到所需的零参数构造函数
- c# - 在 c# 中读取 c++。我知道我需要字节缓冲区但不完全在那里
- c# - 默认参数值到另一个参数
- twitter-bootstrap - Bootstrap 4如何将窄文本居中和垂直布置