将可交互视图放置在NavigationView的隐藏导航栏前面

Question

我NavigationView的NavigationButton内部有一个，但是即使导航栏被隐藏，我也无法使NavigationButton位于屏幕顶部并且仍然能够被按下。

这段代码：

struct ContentView : View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationButton(destination: Text("Button Clicked")) {
                    Text("Hello World")
                    .background(Color.yellow)
                }
                Spacer()
            }
        }
        .navigationBarHidden(true)
    }
}

看起来像 但我希望它看起来像 。

我尝试在VStack（的顶部）添加一个负距填充.padding([.top], -95)，并且在视觉上起作用，但是后来我无法通过点击按钮来与按钮进行交互（我认为它位于隐藏的导航栏的后面）。将VStacks 设置zIndex为10000即可解决此问题，但仍然无法正常工作。我是否可以将按钮移至顶部，同时仍要确保在点击按钮时可以识别该按钮？

Answer 1

navigationBarTitle在隐藏导航栏之前添加：

struct ContentView : View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationButton(destination: Text("Button Clicked")) {
                    Text("Hello World")
                    .background(Color.yellow)
                }
                Spacer()
        }
        .navigationBarTitle(Text("Title")) // Add this line
        .navigationBarHidden(true)
    }
}

Answer 2

将此修饰符添加到您的 NavigationView edgesIgnoringSafeArea(.top)。