🪶

SwiftUIで画面遷移を実装する

2024/07/13に公開

iOS

SwiftUI

tech

NavigationStackなるものを使う

昔は、NavigationViewだったらしい。現在は非推奨になってしまったようだ。

If your app has a minimum deployment target of iOS 16, iPadOS 16, macOS 13, tvOS 16, watchOS 9, or visionOS 1, or later, transition away from using NavigationView. In its place, use NavigationStack and NavigationSplitView instances. How you use these depends on whether you perform navigation in one column or across multiple columns. With these newer containers, you get better control over view presentation, container configuration, and programmatic navigation.

アプリの最小デプロイメントターゲットがiOS 16、iPadOS 16、macOS 13、tvOS 16、watchOS 9、またはvisionOS 1以降である場合は、NavigationViewの使用から移行してください。その代わりに、NavigationStackとNavigationSplitViewインスタンスを使用します。これらをどのように使うかは、ナビゲーションを1つの列で行うか、複数の列にまたがって行うかによって異なります。これらの新しいコンテナを使用すると、ビューの表示、コンテナの構成、およびプログラムによるナビゲーションをよりよく制御できるようになります。

通常の画面遷移

NavigationStackで囲むと、画面遷移ができるようになる。ボタンをタップすると、NavigationLinkで指定した、NextViewへ画面遷移する。画面左上のbackボタンを押すと、元のページへ戻れる。

import SwiftUI


struct ContentView: View {
    
    var body: some View {
        VStack {
            NavigationStack {
                        NavigationLink(destination: NextView()) {
                            Text("画面遷移")
                        }
                    }
        }
    }
}

#Preview {
    ContentView()
}

struct NextView: View {
    var body: some View {
        Text("Welcome!")
    }
}

[画面遷移前]

[画面遷移後]

モーダルのような画面遷移をする

iOSだと、下から画面がスーと出てくるモーダルがある。この機能を実装するには、.sheetを使う。

import SwiftUI

struct ContentView: View {
    @State private var isShowingSheet = false
    
    var body: some View {
        Button(action: {
            isShowingSheet.toggle()
        }) {
            Text("Show License Agreement")
        }
        .sheet(isPresented: $isShowingSheet,
               onDismiss: didDismiss) {
            VStack {
                Text("License Agreement")
                    .font(.title)
                    .padding(50)
                Text("""
                                Terms and conditions go here.
                            """)
                .padding(50)
                Button("Dismiss",
                       action: { isShowingSheet.toggle() })
            }
        }
    }
    
    func didDismiss() {
            // Handle the dismissing action.
        }
}

ボタンを押すと画面が切り替わる

@Stateで、状態管理をして、ボタンを押すと、分岐処理で画面を切り替えることができる。.toggle()を使うと実現できる。

import SwiftUI

struct ContentView: View {
    @State private var isShowingView: Bool = false

    var body: some View {
        if isShowingView {
            NextView()
        } else {
            Button {
                isShowingView.toggle()
            } label: {
                Text("押してね！")
            }
        }
    }
}

struct NextView: View {
    var body: some View {
        VStack {
            Text("画面が変わった！")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background {
            Color.teal.opacity(0.3)
                .ignoresSafeArea()
        }
    }
}

まとめ

SwiftUIで画面遷移の方法をご紹介しました。他にもパターンは複数ある。例えばログイン状態で画面を切り替えるとか。バージョンアップするとこちらの方法も非推奨になるかもしれないので、常にアンテナを貼っていないといけませんね。

NavigationStackなるものを使う

通常の画面遷移

モーダルのような画面遷移をする

ボタンを押すと画面が切り替わる

まとめ

Discussion