【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を使えば別の画面を表示させることができます。