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

问题描述

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

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

标签： swiftuinavigationview

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

问题描述

解决方案

推荐阅读