2022/7/14

【SwiftUI】NavigationLinkを条件によって画面遷移させる方法

この記事からわかること

Swift UIのNavigationLinkを条件によってコントロールする
クリック以外で画面遷移させる方法
リンクボタンの有効/無効を切り替えるには？
EmptyViewの使い方

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Swift UIを使ってiOSアプリを開発中に画面遷移を条件によって有効/無効にする必要があったので実装方法をまとめていきたいと思います。

NavigationLinkを条件によって画面遷移させる方法

公式リファレンス：init(_:destination:isActive:)

公式リファレンス：NavigationLink

2022年7月現在、iOS 13.0–16.0は非推奨(Deprecated)になっているので以下の記事の方法に変更することをおすすめします。

今回はボタンのクリックにより画面遷移できるように作成していきます。ポイントはBool値を切り替えることなので色々な方法に活用できそうです。

実装方法の流れとポイント

引数に渡すBool値のプロパティを宣言
NavigationLinkの引数にisActiveを追加
Bool値を操作するボタンを用意

引数に渡すBool値のプロパティを宣言

まずは引数に渡すようのBool値のプロパティを用意します。デフォルト値は画面遷移をしないことを表すfalseにしておきます。

@State  var isActive:Bool = false

NavigationLinkの引数にisActiveを追加

次にNavigationLinkの画面遷移をBool値でコントロールできるように引数にisActiveを追加した構文に書き換えます。

NavigationLink(destination: ListCashView(),
  isActive: $isActive, 
  label: {
    EmptyView()
  })

引数destinationには画面遷移させたいビューを渡します。isActiveには先程定義したプロパティをバインディングしておきます。

空のビューを作成する：EmptyView()

@frozen  struct EmptyView

引数labelには何も表示させたくないのでEmptyView()で空のビューを明示的に指定しておきます。

公式リファレンス：EmptyView

EmptyView()はあらかじめ定義されているView構造体です。中にビューを何かしら定義しないといけない時に使用できます。

Bool値を操作するボタンを用意

これでプロパティとNavigationLinkとの紐付けが完了したのであとはプロパティの真偽値を操作するボタンを作っていくだけです。

Button(action: {
          isActive = true
    }, label: {
        Image(systemName: "list.bullet").padding()
        .font(.system(size: 20))
})

ボタンをクリック時に実行されるアクションの中にプロパティisActiveにtrueを格納する処理を記述します。

これでボタンをクリックされたタイミングで画面遷移が実行される処理が完成しました。プロパティへの真偽値の格納をボタンではなく別の処理にすればNavigationLinkを基本は無効に、特定の場合のみ有効にするといったことも実現可能です。

例えば下記は実際に私がアプリ開発で用いた「allCashData.allDataプロパティが空の場合は無効に、値があれば有効にする」場合のコードです。

Button(action: {
    if allCashData.allData.isEmpty {
        isLinkEnable = false
    }else{
        isLinkEnable = true
    }
    
}, label: {
    Spacer()
    Image(systemName: "list.bullet").padding()
    .font(.system(size: 20))
    
})

NavigationLink(destination: ListCashView(parentRefreshFunction: self.refreshData),isActive: $isLinkEnable, label: {
    EmptyView()
})

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Swift