【SwiftUI入門】fullScreenCoverを使って画面遷移しよう
この記事の目次
fullScreenCoverとは
fullScreenCoverとは別の画面を表示させるものです。
sheetとは違い、別の画面が部分的に覆うわけではなく、全体的に覆います。
fullScreenCoverを使うには
| UIコンポーネント .fullScreenCover(isPresented: $bool型の変数, content: { 表示したいView }) |
と記述します。
bool型の変数がtrueになった時にfullScreenCoverが表示されます。
実際に使ってみる
それでは、fullScreenCoverを実際に使ってみましょう。
SwiftUIのプロジェクトを作成してください。
まずは、fullScreenCoverを表示するか決めるbool型の変数を作りましょう。
| @State var showingfullScreenCover = false |
このように記述しましょう。
このコードはshowingfullScreenCoverという名前の
bool型の変数を作るといった内容です。
初期値にはfalseを入れます。
また、@Stateをつけているので、
値を変更することができます。
次にこの変数を使ってfullScreenCoverを表示させましょう。
その前に、fullScreenCoverで表示させるためのViewを作っておきます。
ContentViewの下に
| struct fullScreenCoverView: View { var body: some View { Text(“fullScreenCoverView”) } } |
と記述しましょう。
コードについて説明します。
このコードはfullScreenCoverViewという名前の
Viewを作成するといったコードです。
このViewには『fullScreenCoverView』と表示されるTextがあります。
これでViewを作成することができたので、ボタンが押されたら、このViewが表示されるようにしましょう。
まずは、ボタンを作ります。
| Text(“Hello, world!”) .padding() |
という記述を
| Button(action: { showingSheet = true}) { Text(“sheetを表示”)} |
と書き換えましょう。
コードについて説明します。
このコードは、見た目が『fullScreenCoverViewを表示』というTextの
ボタンを作成するといったコードです。
ボタンを押したら、先ほど作ったshowingFullScreenCoverの値がtrueになります。
次にshowingFullScreenCoverの値がtrueになったら、fullScreenCoverが表示されるようにしましょう。
Buttonの下に
| .fullScreenCover(isPresented: $showingfullScreenCover, content: { fullScreenCoverView()}) |
と記述しましょう。
コードについて説明します。
このコードはfullScreenCoverを表示させる内容です。
第一引数のisPresentedには
『$』を付けたbool型の変数を指定します。
この変数がtrueになった時に、fullScreenCoverが表示されます。
今回は$showingFullScreenCoverと記述したので、
変数showingFullScreenCoverの値がtrueになった時にfullScreenCoverが表示されます。
第二引数のcontentには
fullScreenCoverViewの見た目を格納します。
今回は、先ほど作ったfullScreenCoverViewを格納しました。
これで、fullScreenCoverが表示されるようになりました。
プレビューで確認してみましょう。
プレビューの実行ボタンを押してください。
実行されたら、fullScreenCoverViewを表示ボタンを押します。
ボタンを押したら、fullScreenCoverが表示されますね。
うまくいっています。
このように、fullScreenCoverを使えば別の画面を表示させることができます。