SwiftUI NavigationView和NavigationLink更改自定义视图的布局

问题描述

我有一个DetailView（），它显示图像，文本，然后显示所显示图像的位置的地图。在我的ContentView（）中，我有一个NavigationView和NavigationLink从主视图转到自定义视图。一切正常，除了我查看DetailView（）的预览时，DetailView（）的对齐方式未正确对齐。文字说明显示在图片下方。我已经将头发拉了两天，试图弄清楚这一点，但是到目前为止还没有。

Picture of ContentView()

struct ContentView: View {
    var body: some View {
        
        NavigationView {
            
            NavigationLink(destination: DetailView(picture: "dunnottar-castle")) {
                Text("Hello,World!")
                Image(systemName: "sun.min.fill")
                
            } .buttonStyle(PlainButtonStyle())
            .navigationBarHidden(true)
            
        }
    }
}

====================我的DetailView（）

struct MapView: UIViewRepresentable {
    // 1.
    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
    // 2.
    func updateUIView(_ uiView: MKMapView,context: UIViewRepresentableContext<MapView>) {
        // 3.
        let location = CLLocationCoordinate2D(latitude: 30.478340,longitude: -90.037687)
        // 4.
        let span = MKCoordinateSpan(latitudeDelta: 0.05,longitudeDelta: 0.05)
        let region = MKCoordinateRegion(center: location,span: span)
        uiView.setRegion(region,animated: true)
        
        // 5.
        let annotation = MKPointAnnotation()
        annotation.coordinate = location
        annotation.title = "Abita Springs"
        annotation.subtitle = "Louisiana"
        uiView.addAnnotation(annotation)
    }
}



struct DetailView: View {
 
    let picture: String
    
    var body: some View {
        VStack(spacing: -50.0){
        // Picture and Title
        ZStack (alignment: .bottom) {
            //Image
            Image(picture)
                .resizable()
                .aspectRatio(contentMode: .fit)
            
            Rectangle()
                .frame(height: 80)
                .opacity(0.25)
                .blur(radius: 10)
            
            HStack {
                VStack(alignment: .leading,spacing: 8.0) {
                    
                    Text("EDINBURGH")
                        .foregroundColor(.yellow)
                        .font(.largeTitle)
                }
                .padding(.leading)
                .padding(.bottom)
                Spacer()
                
            }
              
            }.edgesIgnoringSafeArea(.top)
            
            VStack{
                // Description
                Text("Edinburgh is Scotland's compact,hilly capital. It has a medieval Old Town and elegant Georgian New Town with gardens and neoclassical buildings. Looming over the city is Edinburgh Castle,home to Scotland’s crown jewels and the Stone of Destiny,used in the coronation of Scottish rulers. Arthur’s Seat is an imposing peak in Holyrood Park with sweeping views,and Calton Hill is topped with monuments and memorials.")
                    .font(.body)
                    .lineLimit(9)
                    .lineSpacing(5.0)
                    .padding()
                   // .frame(maxHeight: 310)
            }
          
            Spacer()
            // Map of location
            VStack {
                MapView()
                        .edgesIgnoringSafeArea(.all)
                        .padding(.top)
                        .frame(maxHeight: 310)
                
               //     Image(systemName: "person")
                    .padding(.top)
            }
               
            
            
        }
    }
}

解决方法

我改变了

NavigationLink(destination: DetailView(picture: "dunnottar-castle")) {

到

NavigationLink(destination: DetailView(picture: "dunnottar castle").edgesIgnoringSafeArea(.all)) {

它像我现在想要的那样工作。

,

如果只想使用常规布局，也可以使用：

NavigationLink(destination: DetailView(picture: "dunnottar castle").navigationBarHidden(true))