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

Posted 2023-02-19

【中文标题】SwiftUI NavigationView 和 NavigationLink 更改自定义视图的布局

【英文标题】：SwiftUI NavigationView and NavigationLink changes layout of custom view

【发布时间】：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)
            
               
            
            
        
    

【参考方案1】：

我变了

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

到

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

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

【参考方案2】：

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

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