ScrollView中添加Map时顶部边距异常问题求助

问题现象 #

在SwiftUI的ScrollView内添加新版Map组件后，设置了负顶部内边距的红色色块无法按预期与NavigationBar重叠。该问题仅在视图配置了navigationTitle且使用新版Map时出现；移除Map组件或改用UIKit封装的MKMapView后，负内边距的重叠效果恢复正常。

异常状态（Map存在时）：

正常状态（Map移除或改用封装版时）：

问题原因 #

新版SwiftUI Map组件内部集成了与NavigationStack联动的布局逻辑，会自动调整ScrollView的内容嵌入（content inset）以适配安全区域和导航栏。这种自动调整会抵消手动设置的负padding，导致色块无法向上延伸覆盖导航栏。

而通过UIViewControllerRepresentable封装的MKMapView属于UIKit层级视图，不会触发SwiftUI层面的自动布局修正逻辑，因此能保留负padding的视觉效果。

使用新版SwiftUI Map的解决方案 #

无需退回到UIKit封装，通过以下两种方式可修复该问题：

方法1：让Map忽略顶部容器安全区域 #

给Map组件添加ignoresSafeArea修饰，阻止其修改ScrollView的顶部内边距：

import SwiftUI
import MapKit

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView(.vertical) {
                Color.red
                    .padding(.top, -200)
                    .frame(height: 200)
                
                Map()
                    .frame(minHeight: 300)
                    .ignoresSafeArea(.container, edges: .top) // 关键：忽略顶部容器安全区域
            }
            .navigationTitle("Title")
            .navigationBarTitleDisplayMode(.large)
        }
    }
}

#Preview {
    ContentView()
}

方法2：直接调整ScrollView的contentInset #

放弃负padding，改用contentInset直接偏移ScrollView内容：

import SwiftUI
import MapKit

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView(.vertical) {
                Color.red
                    .frame(height: 200) // 移除负padding
                
                Map()
                    .frame(minHeight: 300)
            }
            .contentInset(EdgeInsets(top: -200, leading: 0, bottom: 0, trailing: 0)) // 直接偏移内容
            .navigationTitle("Title")
            .navigationBarTitleDisplayMode(.large)
        }
    }
}

#Preview {
    ContentView()
}

已验证的临时解决方案 #

通过UIViewControllerRepresentable封装原生MKMapView，规避SwiftUI Map的自动布局干扰，代码如下：

import SwiftUI
import MapKit

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView(.vertical) {
                Color.red
                    .padding(.top, -200)
                    .frame(height: 200)
                
                MapView().frame(minHeight: 300)
            }
            .navigationTitle("Title")
            .navigationBarTitleDisplayMode(.large)
        }
    }
}

#Preview {
    ContentView()
}

private typealias ViewControllerRepresentable = UIViewControllerRepresentable

struct MapView: ViewControllerRepresentable {
    typealias ViewController = UIViewController

    class Controller: ViewController {
        var mapView: MKMapView {
            guard let tempView = view as? MKMapView else {
                fatalError("View could not be cast as MapView.")
            }
            return tempView
        }

        override func loadView() {
            let mapView = MKMapView()
            view = mapView
        }
    }

    func makeUIViewController(context: Context) -> Controller {
        Controller()
    }

    func updateUIViewController(_ controller: Controller, context: Context) {}
}

内容的提问来源于stack exchange，提问作者miltenkot