【SwiftUI入門】sheetを使って別の画面を表示しよう(モーダル表示)

1.sheetとは

sheetとは別の画面を表示させるものです。

別の画面を表示させるといっても、別の画面が全体を覆うわけではなく、部分的に覆います。

モーダル表示などと呼んだりします。

sheetを使うには

UI部品
    .sheet(isPresented: $bool型の変数, content: {
        表示したいView
    })

と記述します。

bool型の変数がtrueになった時にsheetが表示されます。

2.実際に使ってみる

それでは、sheetを実際に使ってみましょう。

SwiftUIのプロジェクトを作成してください。

まずは、sheetを表示するか決めるbool型の変数を作りましょう。

@State var showingSheet = false

このように記述しましょう。

このコードはshowingSheetという名前の

bool型の変数を作るといった内容です。

初期値にはfalseを入れます。

また、@Stateをつけているので、

値を変更することができます。

次にこの変数を使ってsheetを表示させましょう。

その前に、sheetで表示させるためのViewを作っておきます。

ContentViewの下に

struct SheetView: View {
    var body: some View {
        Text(“SheetView”)
    }
}

と記述しましょう。

コードについて説明します。

このコードはSheetVIewという名前の

Viewを作成するといったコードです。

このViewには『SheetView』と表示されるTextがあります。

これでViewを作成することができたので、ボタンが押されたら、このViewが表示されるようにしましょう。

まずは、ボタンを作ります。

Text(“Hello, world!”)
    .padding()

という記述を

Button(action: {    showingSheet = true}) {    Text(“sheetを表示”)}

と書き換えましょう。

コードについて説明します。

このコードは、見た目が『sheetを表示』というTextの

ボタンを作成するといったコードです。

ボタンを押したら、先ほど作ったshowingSheetの値がtrueになります。

次にshowingSheetの値がtrueになったら、sheetが表示されるようにしましょう。

Buttonの下に

.sheet(isPresented: $showingSheet, content: {    SheetView()})

と記述しましょう。

コードについて説明します。

このコードはsheetを表示させる内容です。

第一引数のisPresentedには

『$』を付けたbool型の変数を指定します。

この変数がtrueになった時に、sheetが表示されます。

今回は$showingSheetと記述したので、

変数showingSheetの値がtrueになった時にsheetが表示されます。

第二引数のcontentには

sheetの見た目を格納します。

今回は、先ほど作ったSheetViewを格納しました。

これで、sheetが表示されるようになりました。

プレビューで確認してみましょう。

プレビューの実行ボタンを押してください。

実行されたら、sheetを表示ボタンを押します。

ボタンを押したら、sheetが表示されますね。

うまくいっています。

このように、sheetを使えば別の画面を表示させることができます。