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

Question

我有一个 DetailView() 显示图像、文本，然后是显示图像位置的地图。在我的 ContentView() 中，我有一个 NavigationView 和 NavigationLink 可以从主视图转到我的自定义视图。一切正常，除了我的 DetailView() 的对齐方式没有像我查看 DetailView() 的预览时那样正确对齐。文字描述显示在图片下方。我已经花了 2 天的时间试图解决这个问题，但到目前为止还没有。

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)
            }
               
            
            
        }
    }
}

Answer 1

我变了

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

至

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

现在它的工作方式和我想要的一样。

Answer 2

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

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

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

SwiftUI NavigationView and NavigationLink changes layout of custom view

swiftui

navigationview