🍔

【SwiftUI】遷移元で遷移先のnavigationBarItemsが重なるときの対処法

2020/10/17に公開

結論

遷移元のNavigationView.navigationViewStyle(StackNavigationViewStyle())を追加してやればOKです。

NavigationView {
    ...
}.navigationViewStyle(StackNavigationViewStyle())

A navigation view style represented by a view stack that only shows a single top view at a time.
一度に1つの上面ビューのみを表示するビュースタックによって表されるナビゲーションビュースタイル。
StackNavigationViewStyle | Apple Developer Documentation

補足

遷移元(SourceView)からNavigationLinkで遷移先(DestinationView)に遷移する際、各ViewでnavigationBarItemsを定義した場合、遷移先からスワイプでゆーっくり遷移元に戻ると本事象が発生します。以下の例だと、「編集」ボタンと「更新」ボタンが重なってしまいます。

struct SourceView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DestinationView()) {
                    Text("***")
                }
            }
            .navigationBarTitle(Text("***"), displayMode: .inline)
            .navigationBarItems(trailing:
                Button(action: {
                    // 処理
                }) {
                    Text("編集")
                }
            )
        }
    }
}

struct DestinationView: View {
    var body: some View {
        Text("***")
            .navigationBarTitle(Text("***"), displayMode: .inline)
            .navigationBarItems(trailing:
                Button(action: {
                    // 処理
                }) {
                    Text("更新")
                }
            )
    }
}

解決策としては、遷移元のNavigationView.navigationViewStyle(StackNavigationViewStyle())を追加してやればOKです。

struct SourceView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DestinationView()) {
                    Text("***")
                }
            }
            .navigationBarTitle(Text("***"), displayMode: .inline)
            .navigationBarItems(trailing:
                Button(action: {
                    // 処理
                }) {
                    Text("編集")
                }
            )
        }.navigationViewStyle(StackNavigationViewStyle()) // <- これ
    }
}

struct DestinationView: View {
    var body: some View {
        Text("***")
            .navigationBarTitle(Text("***"), displayMode: .inline)
            .navigationBarItems(trailing:
                Button(action: {
                    // 処理
                }) {
                    Text("更新")
                }
            )
    }
}

参考リンク

StackNavigationViewStyle | Apple Developer Documentation

Discussion