【SwiftUI】ハーフモーダルを実装してみた

SwiftUIでハーフモーダルを実装してみました。

ボタンを押すと下からニョキッとモーダルが出てくるアプリです。

OKを押すとモーダルを閉じて元の画面に戻ります。

Storyboardでアプリを開発しているときにモーダルを使いたくて、`FloatingPanel`を使っていました。

SwiftUIだとかなりシンプルなコードでモーダルが実装できますね。

（ただ、FloatingPanelと違って、半分だけ表示することができない？ようです。ハーフ？モーダルと言えるのかな。）

コードは以下のとおり。

左側の画面です。

struct ContentView: View {
    @State var isModal:Bool = false
    @State var counter:Int = 0
    
    var body: some View {
        VStack {
            Button(action: {
                self.isModal = true
            }) {
                Text("モーダルを表示するよ")
            }
            .sheet(isPresented: $isModal,onDismiss: {self.countUp()}) {
                SomeView()
            }
            .disabled(counter >= 3)
            Text("回数:\(counter)")
        }
    }
    
    func countUp(){
        self.counter += 1
    }
}

ボタンが押されたらシートフラグをtrueにして、モーダルを表示します。

モーダルが閉じられるタイミングでカウンターをプラスしてカウントしています。

カウンター値が3、つまり３回シートが表示されたらボタンを押せないようにしています。

右側の画面です。

struct SomeView: View {
    @Environment(\.presentationMode) var presentation
    var body: some View {
        VStack {
            Spacer()
            Text("This is the gift for you")
                .font(.title)
            Image(systemName: "gift").padding(.all).imageScale(.large)
            Spacer()
            Button(action: {self.presentation.wrappedValue.dismiss()}) {
                Text("ok")
                    .font(.title)
            }
            Spacer()
        }
    }
}

`@Environment`のpresentationModeの変数を宣言します。

ボタンが押されたらこの変数のwrappedValueをdismissする事でモーダルを閉じます。

以下の本を参考にしたのですが、分かりやすくて良い感じでした。

オススメの本です。

詳細! SwiftUI iPhoneアプリ開発入門ノート iOS 13 + Xcode11対応 (日本語) 単行本 – 2019/12/21