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、つまり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