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

【问题标题】：SwiftUI NavigationView and NavigationLink changes layout of custom viewSwiftUI NavigationView 和 NavigationLink 更改自定义视图的布局
【发布时间】：2021-01-12 00:26:43
【问题描述】：

我有一个 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)
            }
               
            
            
        }
    }
}

【问题讨论】：

标签： swiftui navigationview

【解决方案1】：

我变了

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

到

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

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

【讨论】：

【解决方案2】：

如果你只想拥有正常的布局，你也可以使用：

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

【讨论】：