SwiftUIの画面遷移方法まとめ

iPhoneアプリがとっつき辛いことの一つに画面遷移の難しさがあると思う。

特にstoryboardは個人的にはかなり扱い辛かった。

そんな中で、新しく開発されたSwiftUIというものを使うと画面遷移も比較的簡単にできるのでおすすめ。

　　　コンテンツ

基本知識

基本知識

まず、種類は次の3つがある

ナビゲーション
ハーフモーダル
フルモーダル

ハーフモーダル

ハーフモーダルは新しく画面が表示されるが、その途中で止まって後ろの画面も少しだけチラ見せしたもの。
.sheetを使う。

struct ContentView2: View {
    let soundPlayer = SoundPlayer()

    @State var ShowNextView = false
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        ZStack{
            BackgroundView(imageName: "background")
            VStack {
                Button {
                    //前の画面に戻る
                    dismiss()
                } label: {
                    Image("piano")
                }

                Button("次の楽器") {
                    ShowNextView.toggle()
                }
                .sheet(isPresented: $ShowNextView, content: {
                    //次のビューを表示
                    ContentView3()
                })
            }
        }
    }
}

struct ContentView2: View {

let soundPlayer = SoundPlayer()

@State var ShowNextView = false

@Environment(\.dismiss) private var dismiss

var body: some View {

ZStack{

BackgroundView(imageName: "background")

VStack {

Button {

//前の画面に戻る

dismiss()

} label: {

Image("piano")

}

Button("次の楽器") {

ShowNextView.toggle()

}

.sheet(isPresented: $ShowNextView, content: {

//次のビューを表示

ContentView3()

})

}

フルモーダル

フルモーダルは新しく表示された画面で完全に画面を覆うもの。
ハーフモーダルとの違いは、.fullScreenCoverを使うところだけ。

struct ContentView2: View {
    let soundPlayer = SoundPlayer()

    @State var ShowNextView = false
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        ZStack{
            BackgroundView(imageName: "background")
            VStack {
                Button {
                    //前の画面に戻る
                    dismiss()
                } label: {
                    Image("back")
                }

                Button("次の楽器") {
                    ShowNextView.toggle()
                }
                .fullScreenCover(isPresented: $ShowNextView, content: {
                    //次のビューを表示
                    ContentView3()
                })
            }
        }
    }
}