🦋

SwiftUI: NavigationViewを使わない簡易的な画面遷移

2023/10/13に公開

NavigationViewNavigationLinkを使った画面遷移では当然ながらNavigationのヘッダーができてしまうのと、iPhoneとiPadでレイアウトが自動的に大きく変わってしまいます。それを簡易的に統一して画面遷移する方法を考えました。

遷移前のView
struct ParentView: View {
    @State var showChildView: Bool = false

    var body: some View {
        Button {
            showChildView = true
        } label: {
            Text("Go ChildView")
        }
        .fullScreenCover(isPresented: $showChildView) {
            ChildView()
        }
    }
}
遷移後のView
struct ChildView: View {
    @Environment(\.dismiss) var dismiss

    var body: some View {
        VStack {
            // 戻るボタンだけのヘッダー
            HStack {
                Button {
                    dismiss()
                } label: {
                    Image(systemName: "chevron.backward")
                        .imageScale(.large)
                        .fontWeight(.bold)
                }
                Spacer()
            }
            .padding()
            // Contents
            Text("Hello")
            Spacer()
        }
    }
}

要点

  • .fullScreenCover()を用いて画面遷移をする
    • 下から生えるタイプのトランジションしか使えないのが難点
  • @Environment(\.dismiss) var dismissで元の画面に戻る
    • 戻る専用のヘッダーも用意してみたけれど、これを使わなくてもOK

Discussion