SwiftUIでハーフモーダルを実装してみました。
ボタンを押すと下からニョキッとモーダルが出てくるアプリです。
OKを押すとモーダルを閉じて元の画面に戻ります。
Storyboardでアプリを開発しているときにモーダルを使いたくて、FloatingPanelを使っていました。
SwiftUIだとかなりシンプルなコードでモーダルが実装できますね。
（ただ、FloatingPanelと違って、半分だけ表示することができない？ようです。ハーフ？モーダルと言えるのかな。）
コードは以下のとおり。
左側の画面です。
|
1 |
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、つまり３回シートが表示されたらボタンを押せないようにしています。
右側の画面です。
|
1 |
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
