💡

SwiftUIで画面遷移をする

2023/11/23に公開

iOS

SwiftUI

tech

Overview

FlutterエンジニアがSwiftUIを勉強してみました。今回は画面遷移についてお話ししようと思います。

SwiftUIは、コードを書けばUIを作ることができるフレームワークです。UIに関係したロジックもコードで作成します。UIKitだと、オブジェクトをドラッグ&ドロップして、部品を配置したり、画面遷移の設定をしていました。

でもSwiftUIだと、Flutterに似た方法で、画面遷移をすることができます。

今回はこちらを参考にしました
Appleのドキュメントはわかりずらくて、こちらを見たら誰かの個人ブログを私は見ます。

summary

Flutterの場合は、Navigatorという機能を使って他のページへ移動することができます。

Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) {
          return MainPage(); // 遷移先の画面widgetを指定
        },
      ),
    );

SwiftUIも似たようなもので、同じように設定をしていきます。まずは、次のページであるNextViewを作成しておきます。

NextView

import SwiftUI

struct NextView: View {
    
    var body: some View {
        VStack {
            Text("次のページ")
        }
        .padding()
    }
}

struct NextView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

最初に表示されるページに、NavigationViewを作成して、その中にNavigationLinkを書いて次のページへ画面遷移をする設定を書きます。Flutterに似てるから、すぐに理解できました。

プロジェクト作成時の最初のUI

ContentView

import SwiftUI

struct ContentView: View {
    @State var str = "Hello, SwiftUI"
    
    var body: some View {
        VStack {
            NavigationView {
                        NavigationLink(destination: NextView()) {
                                Text("NextViewへ遷移")
                        }
                    }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

最初のページ

次のページ

thoughts

今回は、SwiftUIで画面遷移の方法について解説してみました。気をつけなければいけないことは、NavigationViewでNavigationLinkを囲んであげることです。

Overview

summary

thoughts

Discussion