猫でもわかるWebプログラミングと副業

本業エンジニアリングマネージャー。副業Webエンジニア。Web開発のヒントや、副業、日常生活のことを書きます。

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

f:id:yoshiki_utakata:20191225120619p:plain

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

実装

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 徹底入門

SwiftUI 徹底入門

  • 作者:金田 浩明
  • 出版社/メーカー: SBクリエイティブ
  • 発売日: 2019/12/21
  • メディア: 単行本

サンプルコード

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

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

github.com

SwiftUI 徹底入門

SwiftUI 徹底入門

  • 作者:金田 浩明
  • 出版社/メーカー: SBクリエイティブ
  • 発売日: 2019/12/21
  • メディア: 単行本