【SwiftUI】ビューが表示・非表示されたタイミングで実行する処理を定義する

SwiftUIではビューが表示された時、非表示になった時の処理を定義するライフサイクルイベントが用意されている。

それぞれonAppearメソッド、onDisappearメソッドを使うのだが、今回も簡単な実装例を紹介していく。

サンプルコード

今回の例ではContentViewとDetailView、二つのビューを用意する。

まずはDetailViewから。

struct DetailView: View {
  @State var size: CGFloat = 1.0
   
  var body: some View {
    VStack {
      Text("DetailView")
        .font(.system(size: 300))
        .scaleEffect(size)
        .animation(.easeOut(duration: 2))
        .fixedSize()
    }.onAppear {
      print("DetailViewを表示")
      withAnimation {
        self.size = 0.1
      }
    }.onDisappear {
      print("DetailViewを非表示")
    }
  }
}

テキストビューをアニメーション付きで表示するだけのビューだが、ビューが表示された時にフォントサイズを初期化する処理をonAppearメソッドに記述している。

次にContentViewだが、こちらではNavigationLinkを使って、DetailViewへの画面遷移機能を実装している。

struct ContentView: View {
  var body: some View {
    NavigationView {
      NavigationLink(destination: DetailView()) {
        Text("DetailViewへ移動")
      }
    }.onAppear {
      print("ContentViewを表示")
    }.onDisappear {
      print("ContentViewを非表示")
    }
  }
}

どちらのビューでもonAppear、onDisappearメソッドでprint文を実行しているので、デバッグモードでプレビューを確認する。

まず、ContentView表示時の画面がこちら。
リンクをタップするとDetailViewに画面遷移する。

そして左上のBackボタンで元の画面に戻る。

ここまでの流れでビューの表示・非表示が繰り返されたが、デバッグビューを確認するとそれに合わせてprint文が以下のとおり実行されていることが分かる。