如何将忽略安全区域的 MapView 与我的其余内容与 Swift UI 对齐？

Question

我是 Swift 编码的新手，只是想尝试一下。因此，我在这里尝试了这个初学者系列的运气： https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

问题：

我可以完成教程，到目前为止看起来还不错，但后来我想在 MapView 和其余内容之间添加一个 Divider。我运行陷入布局问题。正如他们所说，MapView 覆盖了整个顶部区域，但在 iPhone 11 上，布局在 MapView 和下一个 Divider 之间增加了一个很大的差距。

到目前为止我尝试过的：

我正在尝试 VStack 间距和预览设置，但无法使间隙真正消失，除非我删除 edgesIgnoreSafeArea() 属性即。

在 PreviewProvider 中，我可以将 Layout 设置为 sizeThatFits。这就是我希望它最终呈现的方式，但不仅仅是在预览中。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0.0) {
            MapView()
                .frame(width: .infinity, height: 300.0)
                .edgesIgnoringSafeArea(.top) // this will ignore the top spacing
            
            Divider()
              .frame(height: 2)
              .background(Color.black)
            
            ImageMaskedView()
             .offset(y: -130.0)
             .padding(.bottom, -130)
            
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                
                HStack(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding(10)
            
            Spacer() // this will push the rest up
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 11")
    }
}

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        uiView.setRegion(region, animated: true)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

左： iPhone 11（地图和分隔线之间的巨大差距），右：预览使用sizeThatFits（正确）

问题：

我需要调整什么才能使其正常工作？我是否需要另一种布局，或者我是否必须为整个内容设置固定大小，或者我应该做什么？我只希望最外层布局中的元素尽可能紧凑，然后在各个元素上应用填充、偏移等。

我错过了什么？

Answer 1

您必须在设置框架高度之前应用 edgesIgnoringSafeArea。如果您首先将高度设置为 300.0，它将计算没有安全区域的元素的位置，因此需要更多 space，从而创建白色 space.

MapView()
    .edgesIgnoringSafeArea(.top) // this will ignore the top spacing
    .frame(height: 300.0)

如何将忽略安全区域的 MapView 与我的其余内容与 Swift UI 对齐？

How to align a MapView that ignores the safe area with the rest of my content with Swift UI?

iphone

layout

ios

swift5

swiftui

问题：

到目前为止我尝试过的：

问题：