😽

SwiftUI シート裏の背景が暗くならないボトムシートの作成

に公開
2

Apple純正のマップアプリのようなボトムシートを作成しようと試みて、調べたところ.sheetを使用しているサンプルがヒットしました。
Apple純正のマップアプリのようなボトムシートは出来たのですが、ボトムシートの裏にある要素が薄暗くなります。どのサンプルを見ても裏にある要素が薄暗くなってしまっていたのですが、解決している人を見たので備忘録として残します。

普通の.sheetとの比較

まず、どのような事象が出ているかをチェックします。

適用前 適用後

追加するコード

ContentView.swift
import SwiftUI
import MapKit

struct ContentView: View {
    var body: some View {
        Map()
            .sheet(isPresented: .constant(true)){
            Text("Sheet")
                    .presentationDetents([.height(100), .medium, .large])
+                   .presentationBackgroundInteraction(.enabled)
        }
    }
}

#Preview {
    ContentView()
}

https://developer.apple.com/documentation/swiftui/view/presentationbackgroundinteraction(_:)

出典

@ビスターさん
Thank you🙇🙇🙇

Discussion

ビスタービスター

一応コメントしておきます!
.presentationBackgroundInteraction(.enabled)という修飾子を.presentationDetentsと同じ位置につければ解決します。onAppearは不要です。
onAppear内で書かれているコードは、公式のAPIが提供される前の代替案で、iPadのマルチウインドウの際に副作用があるので、利用を控えた方が良いと思います!!

evesquareevesquare

有益情報ありがとうございます!!
こんなに簡単に書けるんですね😳
記事の内容書き換えさせていただきます!