SwiftUI_ui_transition

画面遷移をしよう

画面遷移とは、次のページにいくことです。
アプリには必須ですね！

遷移前のページを作る

以下の簡単な構成を遷移前のページとしましょう。

import SwiftUI

struct ContentView: View {
  var body: some View {
    NavigationView {
      Text("1 ページ目だよ")
        .navigationBarTitleDisplayMode(.inline)
        .navigationTitle("ページ１")
    }
  }
}

遷移先のページを作る

新しいファイルを作って、そこに遷移先のページを作りましょう！

右のファイルエリアを右クリック（Ctrl+左クリック）し、New File... を選択しましょう。

そのあとは、SwiftUI View を選択しましょう。

ファイルの名前を決めます。
NextView とかにしておきましょう。

最後に、2ページ目の中身を作りましょう。

import SwiftUI

struct NextView: View {
  var body: some View {
    Text("2 ページ目だよ")
      .navigationBarTitleDisplayMode(.inline)
      .navigationTitle("ページ２")
  }
}

画面遷移の設定をしよう

タップした時に画面遷移したい要素を NavigationLink で囲んであげます。
そして、NavigationLink(destination: 遷移先のView) とすればOKです！
以下の例だと、Text を囲んでいるので、Text を押すと画面遷移するようになります。

import SwiftUI

struct ContentView: View {
  var body: some View {
    NavigationView {
      NavigationLink(destination: NextView()) {
        Text("1 ページ目だよ")
      }
      .navigationBarTitleDisplayMode(.inline)
      .navigationTitle("ページ１")
    }
  }
}

※ navigationTitle などの NavigationView につけるオプションは NavigationView 内の最も外側の要素につけます。
さっきまで Text につけていましたが、それを NavigationLink という要素で囲んだため、そちらに移動させます。

画面遷移を試してみよう

さて、画面遷移が設定されたため、テキストの色が押せる感じに変わります。

しかし、この状態で押してもプレビュー上では画面遷移してくれません。というかそもそも押せません。
そんな時は、左上の再生ボタンのようなものを押してください。

これでプレビュー上で画面遷移が試せるようになりました！

次のページに値を渡そう

以下のように、リストを押すと遷移するページを作りました。

struct ContentView: View {
  let fruits = ["りんご", "バナナ", "スイカ"]
  
  var body: some View {
    NavigationView {
      List(fruits, id: \.self) { fruit in
        NavigationLink(destination: NextView()) {
          Text(fruit)
        }
      }
      .navigationBarTitleDisplayMode(.inline)
      .navigationTitle("ページ１")
    }
  }
}

この時、次のページに押した fruit を渡して表示させてみましょう。
以下のように、NextView にイニシャライザを追加してあげます。
ここで fruit を受け取るようにしましょう。
そして、受け取った fruit を Text(fruit) で表示されるようにします。

import SwiftUI

struct NextView: View {
  let fruit: String
  
  init(fruit: String) {
    self.fruit = fruit
  }
  
  var body: some View {
    Text(fruit)
      .navigationBarTitleDisplayMode(.inline)
      .navigationTitle("ページ２")
  }
}

ここで、下のコードに以下のようなエラーが出ると思います。

この部分は、プレビューを描画する用のコードになります。
イニシャライザを追加したのに、値がありませんというエラーですね。
適当に以下のように追加してあげましょう。

struct NextView_Previews: PreviewProvider {
  static var previews: some View {
    NextView(fruit: "いちご")
  }
}

さて、それでは ContentView に戻りましょう。
そして NextView の引数に fruit を入れてあげましょう。

import SwiftUI

struct ContentView: View {
  let fruits = ["りんご", "バナナ", "スイカ"]
  
  var body: some View {
    NavigationView {
      List(fruits, id: \.self) { fruit in
        NavigationLink(destination: NextView(fruit: fruit)) {
          Text(fruit)
        }
      }
      .navigationBarTitleDisplayMode(.inline)
      .navigationTitle("ページ１")
    }
  }
}

完成です！