SwiftUI 2-1-4. Sheetを使う

前回までにNavigationによる画面遷移を紹介しました。もう一つ頻出する画面の移動方法に Sheet があります。モーダルビュー とも呼ばれます。Sheetは現在の画面の補助的な情報を提示するサブ画面に使われることが多いです。代表的なものとして、Appの共有ボタンを押すと「どのように共有しますか」を尋ねるアクションシートなどが挙げられます。今回は自作画面をSheetに表示してみます。

• 前回のコードに続けて書く

• 新しい画面用のswiftファイルを追加する

  • ファイルリストで右クリック, New Fileを選択して新しいファイルを作る
  • File.swiftを ModalView.swift に変更する

ファイルの追加

• ModalView.swift を開く
  • 作り方はFirstViewと同じ。Textを追加する

コード1

1
2
3
4
5
6
7
8
9

import SwiftUI

struct ModalView: View {
    var body: some View {
        VStack {
            Text( "モーダルです" )
        }
    }
}

ModalViewができあがったら SecondView を開きます。

• VStackに**.sheet** を追加
  • .sheetのブロック内で ModalView を使った画面を作る
• @State var is_presented_shown = false を追加
  • .sheetのisPresentedに$is_presented_shownを指定する
    • 値がtrueになるとsheetの中身が表示される
• Buttonを追加
  • 押した時に is_present_shown = true
    • is_present_shownの変化を察知して、sheetが動作する

シートの表示・非表示は@Stateの値でコントロールします。

コード2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import SwiftUI

struct SecondView: View {
    @State var is_present_shown:Bool = false
    
    var body: some View {
        VStack {
            Text( "Secondページです" )
            .padding()
            
            Image( systemName: "globe" )
            .padding()
            
            Button( "シートを開きます" ) {
                is_present_shown = true
            }
        }
        .sheet( isPresented: $is_present_shown ) {
            ModalView()
            .frame( maxWidth: .infinity, maxHeight: .infinity )
            .background( .purple )
        }
    }
}

結果

起動時(FirstView)

SecondViewに移った状態

「シートを開きます」を押したとき

sheetで表示したViewは画面全体ではなく、呼び出し元の画面に上乗せするカードのように表示されます。また下フリックすることでカードは非表示になり、元の画面に戻ることができます。

Sheet

シートはNavigationと独立してサブ画面を利用したいとき便利な仕組みです。ただしシートは元画面の補助的なものであり、単一の画面で完結する機能です。つまりシートからさらに画面を遷移することは想定されていません。継続した画面遷移が必要な場合は、Navigationを使ってください。