🦋
SwiftUI: NavigationViewを使わない簡易的な画面遷移
NavigationView
とNavigationLink
を使った画面遷移では当然ながら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