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