Zenn
Open5

[SwiftUI]カスタムalert

YuusukeYuusuke

通常のalertではなくカスタムviewでalertを表示したい場合、２通りの方法がある。
(要件として、SafeAreaまで含む全画面に半透明のViewを表示する必要がある)

  • RootViewでZStackなどで切り替える方法
  • fullScreenCoverを使う

【SwiftUI】フルスクリーンでモーダル表示する【fullScreenCover】 – .NET ゆる〜りワーク
→fullScreenCoverを使う方法

        .fullScreenCover(isPresented: $isPresented) {
            CustomAlertView(isPresented: $isPresented)
        }
YuusukeYuusuke

今のfullScreenCoverでは、背景を透過させる設定がないので、UIViewRepresentableを使用する。

【SwiftUI】sheetの背景を透過させる方法 | DevelopersIO
[Resolve]-Is there a way to set a fullScreenCover background opacity?

struct BackgroundCleanerView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = .clear
        }
        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {}
}

struct BackgroundCleanerView_Previews: PreviewProvider {
    static var previews: some View {
        BackgroundCleanerView()
    }
}
KyomeKyome

fullScreenCoverの背景を透過させるには.presentationBackground(Color.clear)を使えば良い様です。

content.fullScreenCover(isPresented: $isPresented) {
    Text("Hello")
        .presentationBackground(Color.clear)
}