yama_choki
@yama_choki (yama choki)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

SwiftUI Sheet上のメソッド処理中に、Sheet内だけでなく画面全体にローディング画面を表示する方法

解決したいこと

iPhoneアプリでSheetを使って画面を表示しており、Sheet上でAPI通信を行う処理を実行しています。 処理中は画面全面を覆うローディング画面を表示しようと思い実装してみたのですが、Sheet内でしかローディング表示されません。
・画面全体を覆っている
・背景にSheetの表示が透けて見える
ようなローディング画面を作りたいです。

該当するソースコード

以下が簡易的なSheetの画面です。

struct ContentView: View { 
    @State private var showingSheet = false 
    var body: some View { 
        Button("Sheetを開く") { self.showingSheet.toggle() } 
            .sheet(isPresented: $showingSheet) { 
                SheetView() 
            } 
    } 
} 

struct SheetView: View {  
    @State var isLoading = false 

    var body: some View { 
        ZStack{ 
            VStack{
                Text("SheetView") 
                Button("通信開始"){ 
                    isLoading = true 
                    // 通信処理 
                    isLoading = false 
                } 
            }
            
            if isLoading { 
                ZStack{ 
                    Color.white.opacity(0.5) 
                        .ignoresSafeArea() 
                        .frame(width: geometry.size.width, height: geometry.size.height) 
                    ProgressView() 
                } 
            } 
        } 
    } 
}

自分で試したこと

Geometryを試してみましたが、やはりSheetの中しか表示されませんでした。
また、アニメーションを消したfullScreenCoverを使ってViewを重ねてみましたが、fullScreenCoverでは背景が透けませんでした。
そもそも、SheetViewの中に記載してはいけないのかとも思いますが、実装方法を調べてみても実現可能そうなモノが見つけられませんでした。
ご教示いただけると助かります。 よろしくお願いいたします。

0

1Answer

アニメーションを消したfullScreenCoverを使ってViewを重ねてみましたが、fullScreenCoverでは背景が透けませんでした

上に表示したviewのopacityを小さくしないと、その下のviewが透けて見えることはありません。
初期値は1.0だと思うので、0.5ぐらいにしてみたらどうでしょうか?

0Like

Comments

  1. @yama_choki

    Questioner

    返信ありがとうございます。
    opacityを0.0にしたり、backgroundColorをClearにしたりしても透明にはなりませんでしたが、以下の記事を参考にfullScreenCoverを透過させることができました。
    https://dev.classmethod.jp/articles/swiftui-mr-transparent/

    しかし、透過したfullScreenCoverにローディング画面をつけると、また別の不具合が出たので、一旦この質問についてはクローズして、別で質問を立てようと思います。
    ありがとうございました。

Your answer might help someone💌