【SwiftUI】Sheet下のViewの操作を有効にする

はじめに

MapKitを使ったアプリを開発中で、検索バーをSheetを使って常設しようとしました。
そのときにちょっと困ったことがありました。

困ったこと

Mapの上にSheetを表示すると、Mapの操作ができなくなりました。

サンプルコード

import SwiftUI
import MapKit

struct ContentView: View {
    @State private var showSheet: Bool = true
    @State private var inputText:String = ""
    
    var body: some View {
        ZStack {
            Map()
        }
        .sheet(isPresented: $showSheet) {
            HStack(spacing: 15){
                
                Image(systemName: "magnifyingglass")
                    .font(.system(size: 22))
                    .foregroundColor(.gray)
                
                TextField("場所を入力して移動", text: $inputText)
            }
            .presentationDetents([.height(60)])
            .presentationCornerRadius(20)
            .presentationBackground(.thinMaterial)
            .padding()
        }
    }
}

#Preview {
    ContentView()
}

解決法

presentationBackgroundInteractionモディファイアで、シート下にあるViewの操作をできるようしました。
https://developer.apple.com/documentation/swiftui/presentationbackgroundinteraction

import SwiftUI
import MapKit

struct ContentView: View {
    @State private var showSheet: Bool = true
    @State private var inputText:String = ""
    
    var body: some View {
        ZStack {
            Map()
        }
        .sheet(isPresented: $showSheet) {
            HStack(spacing: 15){
                
                Image(systemName: "magnifyingglass")
                    .font(.system(size: 22))
                    .foregroundColor(.gray)
                
                TextField("場所を入力して移動", text: $inputText)
            }
            .presentationDetents([.height(60)])
            .presentationCornerRadius(20)
            .presentationBackground(.thinMaterial)
            .presentationBackgroundInteraction(.enabled(upThrough: .height(60))) // これを追加
            .interactiveDismissDisabled()
            .padding()
        }
    }
}

#Preview {
    ContentView()
}