细节视图顶部的额外空间不会消失（SwiftUI）

Question

我在详细视图中有一个不会消失的额外空间。该视图来自 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()
    }
}

Answer 1

那是NavigationBar一种large风格。您可以使用此修饰符将其变小：

.navigationBarTitle("Title", displayMode: .inline)

由于 OP 的评论而更新

如果你想在扩展内容的同时保留大标题，你应该考虑忽略安全区域的top边缘：

.edgesIgnoringSafeArea(.top)

此外，您可能希望在忽略安全区域之前添加一些paddings以保留导航大小。inline

重要的

1. 请注意，所有这些修饰符都应应用于目标视图。

2. 该NavigationBar会呆在那里，防止传递到下面的意见触摸事件。.navigationBarHidden(true)如果你真的需要摆脱它，你应该使用它。

Answer 2

如果详细视图不需要标题，.navigationBarTitleDisplayMode(.inline)则在 DetailView 中使用，而不是使用。 .navigationBarTitle(...)