モーダルビュー(.sheet
など)を表示している間に背後のビューを操作可能にするには、PresentationBackgroundInteraction
モディファイアを使用します。
以下に、
を使用してモーダルビューを表示中に背後のビューを操作可能にする例を示します。PresentationBackgroundInteraction
サンプルコード
サンプルコードのポイント
sheet内のビューに以下のように適用します。
.presentationBackgroundInteraction(.enabled)
import SwiftUI
struct BackgroundInteractionSmp: View {
@State private var showingModal = false
@State private var slVal : Double = 0
var body: some View {
VStack {
// モーダルビューの表示ボタン
Button("Show Modal") {
showingModal = true
}
Slider(value: $slVal, in: 0...10, step: 1)
Text("\(slVal)")
Spacer()
}
.sheet(isPresented: $showingModal) {
// モーダルに表示するビュー
Text("This is a modal view.")
.foregroundStyle(.white)
// 背景を青色に設定
.presentationBackground(.blue)
// sheetの高さを3段階に設定
.presentationDetents([.height(120), .medium, .large])
// 背景の操作可否
.presentationBackgroundInteraction(.enabled)
}
}
}
サンプルコードの動作
サンプルコードでは、メインビューに、sheetを表示するためのボタンとスライダー、及びスライダーの値を表示するテキストビューを配置しています。
このようにsheetを表示させてもスライダーの操作が可能となります。
sheetを表示している高さによって操作可否を使い分ける
以下のようにpresentationBackgroundInteractionのパラメータにおいて、操作可能とする高さを指定すると、指定した高さまでは背景のビューを操作可能とし、それ以上は操作不可とすることも可能です。
.presentationBackgroundInteraction(.enabled(upThrough: .height(120)))
以下のような動作となります。
まとめ
本記事ではPresentationBackgroundInteractionを使用して、sheetビューの背景にあるビューを操作可能にする方法を紹介しました。
モーダルビューを使用する目的の一つが、背後のビューを操作不可としたいということが多いため、あまり使われない機能かもしれませんが、覚えておくと何かのタイミングで使えるかもしれません。
コメント