TabView内嵌Map时使用.sheet修饰符引发的性能卡顿问题

问题重现 #

在SwiftUI中，当Map（或自定义UIViewRepresentable封装的MKMapView）嵌套在TabView或NavigationStack内时，切换Sheet会出现明显卡顿。简化复现代码如下：

class ItemAnnotation: NSObject, MKAnnotation {
    private(set) var coordinate: CLLocationCoordinate2D
    
    init(coordinate: CLLocationCoordinate2D) {
        self.coordinate = coordinate
    }
}

struct Item: Identifiable {
    let id = UUID()
    let coord: CLLocationCoordinate2D
}

struct ContentView: View {
    @State private var showSheet = false
    
    var body: some View {
        TabView {
            VStack {
                Map(coordinateRegion: .constant(MKCoordinateRegion(MKMapRect.world)), annotationItems: items()) { item in
                    MapMarker(coordinate: item.coord)
                }
                
                Button("Toggle Sheet") {
                    showSheet.toggle()
                }
                .padding()
            }.sheet(isPresented: $showSheet, content: {
                Text("some text")
            })
        }
    }
    
    private func items() -> [Item] {
        var res = [Item]()
        stride(from: -20, through: 20, by: 1).forEach { lat in
            stride(from: -50, through: 100, by: 5).forEach { long in
                res.append(Item(coord: CLLocationCoordinate2D(latitude: lat, longitude: long)))
            }
        }
        return res
    }
}

移除TabView后卡顿消失，但项目要求必须保留TabView，需找到可行解决方法。

核心原因 #

卡顿源于TabView/NavigationStack在Sheet切换时会触发内嵌视图的强制重绘，而带有大量标注的Map重绘成本极高，直接阻塞UI线程。

解决方案 #

方案1：将Sheet附加到TabView层级而非内部视图 #

把.sheet修饰符从内部VStack移到TabView上，避免Sheet切换时触发Map的重绘：

struct ContentView: View {
    @State private var showSheet = false
    
    var body: some View {
        TabView {
            VStack {
                Map(coordinateRegion: .constant(MKCoordinateRegion(MKMapRect.world)), annotationItems: items()) { item in
                    MapMarker(coordinate: item.coord)
                }
                
                Button("Toggle Sheet") {
                    showSheet.toggle()
                }
                .padding()
            }
        }
        .sheet(isPresented: $showSheet, content: {
            Text("some text")
        })
    }
    
    private func items() -> [Item] {
        var res = [Item]()
        stride(from: -20, through: 20, by: 1).forEach { lat in
            stride(from: -50, through: 100, by: 5).forEach { long in
                res.append(Item(coord: CLLocationCoordinate2D(latitude: lat, longitude: long)))
            }
        }
        return res
    }
}

方案2：用UIViewControllerRepresentable封装Sheet（复杂场景适配） #

如果需要在Tab内部控制Sheet展示逻辑，可通过原生UIKit的Sheet方式绕过SwiftUI的视图重绘问题：

// 封装UIKit Sheet控制器
struct SheetController: UIViewControllerRepresentable {
    @Binding var isPresented: Bool
    let content: () -> UIViewController
    
    func makeUIViewController(context: Context) -> UIViewController {
        UIViewController()
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
        if isPresented, uiViewController.presentedViewController == nil {
            let sheetVC = content()
            sheetVC.modalPresentationStyle = .pageSheet
            uiViewController.present(sheetVC, animated: true)
        } else if !isPresented, let presentedVC = uiViewController.presentedViewController {
            presentedVC.dismiss(animated: true)
        }
    }
}

// 视图使用示例
struct ContentView: View {
    @State private var showSheet = false
    
    var body: some View {
        TabView {
            VStack {
                Map(coordinateRegion: .constant(MKCoordinateRegion(MKMapRect.world)), annotationItems: items()) { item in
                    MapMarker(coordinate: item.coord)
                }
                
                Button("Toggle Sheet") {
                    showSheet.toggle()
                }
                .padding()
                
                // 隐藏式嵌入Sheet控制器
                SheetController(isPresented: $showSheet) {
                    UIHostingController(rootView: Text("some text"))
                }
                .frame(width: 0, height: 0)
            }
        }
    }
    
    private func items() -> [Item] {
        var res = [Item]()
        stride(from: -20, through: 20, by: 1).forEach { lat in
            stride(from: -50, through: 100, by: 5).forEach { long in
                res.append(Item(coord: CLLocationCoordinate2D(latitude: lat, longitude: long)))
            }
        }
        return res
    }
}

方案3：优化Map标注渲染（配合前方案效果更佳） #

对于自定义MKMapView的场景，可进一步降低重绘开销：

• 启用MKClusterAnnotation实现标注聚类，减少屏幕实时显示的标注数量
• 复用MKAnnotationView，避免频繁创建销毁视图
• 异步加载标注图标，避免阻塞主线程

效果验证 #

调整后，Sheet切换时Map不会被强制重绘，卡顿现象完全消失，同时保留了TabView的结构要求。

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