【Swift UI】ボタンを押した時にモーダルを出す

ボタンを押した時にモーダルを出す方法です。

実装

struct ContentView: View {
    // モーダルが開いているかどうかを表す State を用意する必要があります
    @State private var isShowingSettingModal = false
    
    var body: some View {
        Button(action: {
            // ボタンをクリックした時にステートを変更します
            // toggle は boolean の true と false を入れ替えるメソッド
            // これを true にすることでモーダルが表示されます
            self.isShowingSettingModal.toggle()
        }){
            // ボタンの文字。今回は適当に設定します。
            Text("設定")
            
        // .sheet の中身がモーダル（シートのUI？）の中身になります
        // isShowingSettingModal の値が true になると勝手に表示されます
        // $ がついているのは、値が変わった時にちゃんと評価され治せるようにとか、そんなんだと思います。
        }.sheet(isPresented: self.$isShowingSettingModal) {
            // 中身は適当に別のビューを用意します。
            AnotherView()
        }
    }
}

• まず State として bool 値を用意します
• sheet の中身がモーダルとして出てくるビューになります
• sheet の引数に渡した isPresented が true になるとビューが出てきます
• ボタンの action で State を true にします

これでモーダル表示UIができます。

今までのSwiftの書き方とかなり違うので最初は戸惑うかもしれません。

SwiftUI 徹底入門

サンプルコード

サンプルコードを用意しました。

• https://github.com/yoshikyoto/Swift4_SwiftUI_Sample/blob/master/SwiftSample/ModalSampleView.swift

サンプルコードの試し方はリポジトリのREADMEを読んでください。他にもいろいろなサンプルが追加されていくと思うので、気になったものがあったら試してみてください。

github.com

SwiftUI 徹底入門