[SwiftUI]sheetを使ってモーダル画面遷移を実装する

「　SwiftUIアプリでモーダル遷移を実装したい…　」

「　SwiftUIのsheetってどう使えばいいの…?　」

こんばんは、中川です。

今回はSwiftUIのView機能であり、シート画面を実装できる「sheet(シート)」を解説します！

sheet機能を用いることで、以下のようなシート画面が実装できます。

シート画面は、現在位置する画面の上(前)に表示され、ユーザーがシート画面以外の部分をタップしたり、下にスワイプすると、シート画面が閉じるようになっています。

[ 本記事はこんな人におすすめ ]

・SwiftUIを勉強している

・SwiftUIのsheet機能の使い方を知りたい

・SwiftUIでモーダル遷移を実装したい

環境・バージョン

　> Swift 5.7.2

　> Xcode 14.2

　> macOS 13.0 Ventura

サンプルコードの紹介

本記事内で書いたサンプルコードは筆者のGitHubにアップロードしております。

実際どのように書かれているのか確認したりする際に、良ければお使いください。

GitHubを見に行く >>

1 1. シート画面の基本的な実装手順
2 2. sheetを使った様々な実装例
3 まとめ

1. シート画面の基本的な実装手順

では早速sheetを使ってシート画面を実装していきましょう。

大まかな実装の手順は以下です。

①　シート画面の表示/非表示を管理する状態変数を作る

②　sheetをViewのbody内に配置する

③　①で作った状態変数をスイッチングするトリガーを用意する

手順１: シート画面の表示/非表示を管理する状態変数を作る

sheetでモーダル遷移によるシート画面表示を実装するには、画面の表示を管理する状態変数が必要です。

状態変数については以下の記事にて詳しく解説しています。

[SwiftUI]データバインディングを学ぶ！@Stateの機能と使い方

以下のようにBool型の状態変数を準備します。名前は「showSheet」としました。

				
					// シート画面の表示を管理する状態変数
    @State var showSheet: Bool = false

手順２: sheetモディファイアをViewのbody内に配置する

次に、シート画面を表示させたい対象Viewのbody内にsheetモディファイアを配置します。

この時に、sheetモディファイアの引数「isPresented:」に状態変数を紐付けます。この紐付けによって、状態変数の更新とシート画面の表示/非表示が連動するようになります。

				
					.sheet(isPresented: $showSheet) { // ⬅︎ 引数isPresentedに状態変数を紐づける
            
            // この中で実装したViewがシート画面に表示される
            
        }

sheetは以下のようにbody内にモディファイアとして定義されます。

手順３: 状態変数の値を更新するトリガーを用意する

最後に状態変数の値を更新するためのトリガーを作りましょう。

今回はButton(ボタン)を使って状態変数の値を更新します。

「toggle()」とすることでBool型プロパティの値を反転させます。

				
					Button("シートモーダル画面を表示") {
            
            // ボタンタップで状態変数の値を切り替える
            showSheet.toggle()
        }

見通しを良くするため、デフォルトのコードは削除して、ボタンだけを配置しました。

これでモーダル遷移の準備は完了です。

あとはsheetモディファイアのクロージャ内に、シート画面上で表示させたいViewデザインを定義すればOKです。

試しにsheetのクロージャ内にTextを入れてみました。

この状態でボタンをタップすると、

定義したViewデザイン通りのシート画面が表示できていますね！

以上がsheetによるモーダル遷移の基本的な実装手順です。

2. sheetを使った様々な実装例

sheetの基本的な使い方がわかったところで、sheetの多様な形での実装方法をご紹介します。これらをうまく組み合わせることで、複雑なモーダル遷移の実装を可能にします。

実装例1: 複数のシート画面を出し分ける

以下のように同じView内に複数のsheetを配置すれば、同じ画面内で複数のシート画面を出し分けるような実装ができます。

[ コード例 ]

				
					struct MultipleSheetView: View {
    
    // 状態変数をシート画面の数だけ用意
    @State var showSheet1: Bool = false
    @State var showSheet2: Bool = false
    @State var showSheet3: Bool = false
    
    var body: some View {
        
        // シート画面の数だけ状態変数のトリガーを用意
        VStack(spacing: 40) {
            Button("１つ目のシートモーダル画面を表示") {
                showSheet1.toggle()
            }
            Button("２つ目のシートモーダル画面を表示") {
                showSheet2.toggle()
            }
            Button("３つ目のシートモーダル画面を表示") {
                showSheet3.toggle()
            }
        }
        
        // シート画面の数だけsheetモディファイアを用意
        .sheet(isPresented: $showSheet1) {
            ZStack {
                Color.blue
                Text("これは１つ目のシートモーダル画面です")
            }
        }
        .sheet(isPresented: $showSheet2) {
            ZStack {
                Color.green
                Text("これは２つ目のシートモーダル画面でsy")
            }
        }
        .sheet(isPresented: $showSheet3) {
            ZStack {
                Color.red
                Text("これは２つ目のシートモーダル画面です")
            }
        }
        
    } // body
} // View

(見分けやすいように各シート画面に背景色を付けています)

実装例2: シート画面の中からさらに次のシート画面を呼ぶ

sheetのクロージャ内に定義したView構造体の中に、さらにsheetを配置しておくことで、多階層的なモーダル遷移の実装ができます。

[ コード例 ]

				
					// 多階層的なシートモーダル遷移の実装
struct MultilevelSheetView: View {
    // 一つ目のシート画面表示を管理する状態変数
    @State var firstShowSheet: Bool = false
    
    var body: some View {
        
        Button("１つ目のシートモーダル画面を表示") {
            firstShowSheet.toggle()
        }
        .sheet(isPresented: $firstShowSheet) {
            
            FirstSheetView()
        }
    }
}

// 一つ目のシートモーダル画面
struct FirstSheetView: View {
    
    // 二つ目のシート画面表示を管理する状態変数
    @State var secondShowSheet: Bool = false
    
    var body: some View {
        Button("２つ目のシートモーダル画面を表示") {
            secondShowSheet.toggle()
        }
        .sheet(isPresented: $secondShowSheet) {
            SecondSheetView()
        }
    }
}

// 二つ目のシートモーダル画面
struct SecondSheetView: View {
    var body: some View {
        Text("これは２つ目のシートモーダル画面です")
    }
}

実装例3: シート画面の表示管理変数を間接的にトリガーする

ここまでの解説では、ボタンアクションによる直接的な状態変数の更新によってシート画面表示を管理してきましたが、間接的な状態変数の更新によるシート画面の表示管理ができると、モーダル遷移実装の幅は大きく広がります。

例えば「カウントが１０以上になったらシート画面を表示する」とする場合、以下のように実装できます。

[ コード例 ]

				
					struct CountShowSheetView: View {
    
    @State var count: Int = 0
    @State var showSheet: Bool = false
    
    var body: some View {
        
        Text("\(count)")
            .font(.largeTitle)
        
        Button("値をプラス１する") {
            count += 1
            
            // 条件に当てはまるとシート画面を表示する
            if count >= 10 {
                showSheet.toggle()
            }
        }
        
        .sheet(isPresented: $showSheet) {
            Text("カウントが１０になりました！")
        }
    }
}

ボタンアクション内にif文の条件式を追加して、条件に当てはまったら状態変数を更新します。

このように、異なる変数値の変化を用いて間接的にシート表示を発火させることができます。