如何阻止推送视图暂时呈现隐藏的导航栏？

Question

出乎意料的是，SwiftUI 的推送视图会在过渡时临时渲染其内容，并为隐藏的导航栏留出空间。片刻之后，它重新正确渲染。如何防止这种行为？

对于 GIF 屏幕录制，请单击下面的图像。

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var goToNextView = false

    var body: some View {
        NavigationView { ZStack {
            /*@START_MENU_TOKEN@*/Color.yellow/*@END_MENU_TOKEN@*/.edgesIgnoringSafeArea(.all)
            NavigationLink(destination: SecondView(), isActive: $goToNextView) {Text("")}
                .navigationBarTitle("")
                .navigationBarHidden(true)
                .navigationBarBackButtonHidden(true)


            VStack {

                Button(action: {
                    print("Button clicked")
                    self.goToNextView = true
                }) { Text("Go to second view") }
                    .padding()
                Text("This is the first view.")

            }
        }
        .foregroundColor(Color.blue)

        }
    }
}

SecondView.swift

struct SecondView: View {

    var body: some View {

        ZStack {

            Color.purple
            .edgesIgnoringSafeArea(.all)

            .navigationBarBackButtonHidden(true)
            .navigationBarHidden(true)

            VStack { Text("Pushed view") }

        }
        .foregroundColor(Color.white)

    }
}

Answer 1

我通过使用受this answer 影响的视图修改器删除了此行为。

内联 cmets 解释我所做的更改。

import SwiftUI

    struct ContentView: View {
        @State var goToNextView = false

        var body: some View {
            NavigationView { ZStack {
                /*@START_MENU_TOKEN@*/Color.yellow/*@END_MENU_TOKEN@*/.edgesIgnoringSafeArea(.all)
                NavigationLink(destination: SecondView(), isActive: $goToNextView) {Text("")}
                    // Removed all nav config code here
                VStack {
                    Button(action: {
                        print("Button clicked")
                        self.goToNextView = true
                    }) { Text("Go to second view") }
                        .padding()
                    Text("This is the first view.")
                }
            }
            // Added this to hide bar
            .hiddenNavigationBarStyle()
            .foregroundColor(Color.blue)

            }
        }
    }

    struct SecondView: View {
        var body: some View {
            ZStack {
                Color.purple
                .edgesIgnoringSafeArea(.all)
                    // Added this to hide bar
                    .hiddenNavigationBarStyle()
                VStack { Text("Pushed view") }
            }
            .foregroundColor(Color.white)
        }
    }

这是取自之前答案的视图修饰符：

struct HiddenNavigationBar: ViewModifier {
    func body(content: Content) -> some View {
        content
        .navigationBarTitle("", displayMode: .inline)
        .navigationBarHidden(true)
    }
}

extension View {
    func hiddenNavigationBarStyle() -> some View {
        ModifiedContent(content: self, modifier: HiddenNavigationBar())
    }
}

Answer 2

即使你想隐藏导航栏，SwiftUI 也需要设置 NavigationBar Title。在您的第一个视图中，您做到了。在第二个你没有。

将此添加到您的 SecondView 可以解决问题：

.navigationBarTitle("")

和SecondView一共：

struct SecondView: View {

    var body: some View {

        ZStack {

            Color.purple
            .edgesIgnoringSafeArea(.all)

            .navigationBarTitle("")
            .navigationBarBackButtonHidden(true)
            .navigationBarHidden(true)

            VStack { Text("Pushed view") }

        }
        .foregroundColor(Color.white)

    }
}