【SwiftUI】NavigationView, NavigationLink で画面スワイプで戻るのを無効にする方法

2020年11月19日2021年1月10日

NavigationView, NavigationLink を使って画面遷移が出来る様にするとデフォルトでは画面スワイプで前の画面に戻れるようになっています。これは便利ですが場合によっては邪魔な場合があります。今回はこれを無効にする方法についてです。

NavigationView を作る

まずは遷移元の方です。シンプルにこれで TestView5 に遷移できる様にします。

遷移元

import SwiftUI

struct TestView3: View {
    
        var body: some View {
            NavigationView {
                NavigationLink(destination: TestView5()) {
                    Image("hoge")
                        .aspectRatio(contentMode: .fit)
                }
        }
    }
    
}

.navigationBarItems() でカスタム back button を作る

次に遷移先ですが、 .navigationBarBackButtonHidden(true) をする事によってスワイプのジェスチャーで画面が戻る機能を無効にできます。しかしこれでは戻るボタンが消えて戻れなくなるので .navigationBarItems で別でback ボタンを追加します。

遷移先

import SwiftUI

struct TestView5: View {
    @Environment(\.presentationMode) var presentationMode
    
        var body: some View {
            
            ZStack {
            
            Image("hoge2")
                .aspectRatio(contentMode: .fit)
            }
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(leading: Button(action: {self.presentationMode.wrappedValue.dismiss()}){
                Image(systemName: "chevron.left").foregroundColor(Color.blue).font(Font.system(size:23, design: .serif)).padding(.leading,-6)
                Text("Back")
            })
                
    }
    
}

@Environment(.presentationMode) を指定しておいて dismiss() で画面を戻します。後はこんな感じでアイコンの Image と Text を追加すると下記の様なオリジナルと同じ様な見た目のカスタム back ボタンが作れます。

これでスワイプが無効になった状態で戻るボタンから画面をもどせます。