Swift・iOS

Swiftを中心に学んだことを記録に残すブログです。技術に関係ない記事もたまに書いています。

【SwiftUI】モーダルビューを全画面表示にする

iOS Swift SwiftUI

 

はじめに

モーダルビューを全画面表示する実装についてメモ。

 

開発環境

 

本題

通常のモーダルビューとの実装の違い

【SwiftUI】モーダルビューを実装する - Swift・iOSでは、"sheet(isPresented:onDismiss:content:)"を使用してモーダルビューを表示していましたが、全画面表示にするには、"fullScreenCover(isPresented:onDismiss:content:)"を使用します。

 

全体のコード

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var isModalActive = false
    
    var body: some View {
        Button(action: {
            self.isModalActive.toggle()
        }) {
            Text("モーダルビューを表示する")
        }
        .fullScreenCover(isPresented: $isModalActive) {
            ModalView()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

ModalView.swift

import SwiftUI

struct ModalView: View {
    @Environment(\.presentationMode) var presentation
    
    var body: some View {
        Text("モーダルビューが表示されています")
            .padding()
        
        Button(action: {
            self.presentation.wrappedValue.dismiss()
        }, label: {
            Text("閉じる")
        })
    }
}

struct ModalView_Previews: PreviewProvider {
    static var previews: some View {
        ModalView()
    }
}

 

おわりに

 いつも以上に小ネタな記事になってしまった・・・。

 

参考