sheetなどモーダルビューを表示中に背後のビューを操作可能にするには?【PresentationBackgroundInteraction】

この記事は約3分で読めます。
  • iOS:16.4以上
  • XCode(当サイトの環境):15.0.1

モーダルビュー(.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ビューの背景にあるビューを操作可能にする方法を紹介しました。

モーダルビューを使用する目的の一つが、背後のビューを操作不可としたいということが多いため、あまり使われない機能かもしれませんが、覚えておくと何かのタイミングで使えるかもしれません。

コメント

タイトルとURLをコピーしました