【SwiftUI】モーダルビューを実装する

はじめに

モーダルビューを実装する手順をまとめました。

開発環境

• macOS Catalina 10.15.7
• Xcode 12.2
• Swift 5.3.1

本題

手順

モーダルビューを実装するファイルを追加

"File" > "New" > "File..."と選択していく。

"SwiftUI View"を選択。

ファイル名を"ModalView"として、"Create"を選択。

Textの内容を変更しておく。

ModalView.swift

モーダルビューを呼び出す

ContentView.swiftを開いて、Textを削除。

ContentView.swift

画面右上の"+"を選択。

"Button"を選択。

コードが挿入される。

ContentView.swift

Textを追加することでButtonに表示する文字列を指定。

ModalViewの表示状態を管理する変数isModalActiveを追加。

Buttonを選択した時にisModalActiveをtrueに変更する。

ContentView.swift

isModalActiveがtrueの場合にModalViewを表示する実装を追加。

ContentView.swift

モーダルビューに閉じるボタンを追加

Environment property wrapperを使った変数とButtonを追加。

ModalView.swift

※@Bindingを使っても閉じる動作を実装できる。その場合はContentView.swift側の実装も修正が必要。

ModalView.swift

ContentView.swift

全体のコード

※Environment property wrapperを使ってモーダルビューを閉じるパターンの実装を記載しています。@Bindingを使うパターンの実装については「手順」欄を参考にしてください。
ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var isModalActive = false
    
    var body: some View {
        Button(action: {
            self.isModalActive.toggle()
        }) {
            Text("モーダルビューを表示する")
        }
        .sheet(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()
    }
}

おわりに

実装の復習として、今後もSwiftUIの基本的な実装手順を記事に残していこうと思います。

※2021/03/23 追記

モーダルビューを全画面で表示する方法について記事にしました。

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

参考

• https://developer.apple.com/documentation/swiftui/view/sheet(ispresented:ondismiss:content:)

• https://developer.apple.com/documentation/swiftui/environment

• https://developer.apple.com/documentation/swiftui/state

• https://developer.apple.com/documentation/swiftui/binding