导航栏标题自动显示模式不起作用

Question

我不确定如何解决这个问题。我已经用ZStacks实现了ScrollView和NavigationView。但是，自动显示模式不起作用，ScrollView 位于其后面，标题重叠。

https://i.stack.imgur.com/KPkGh.png https://i.stack.imgur.com/H8NwS.png

这是我当前的代码：

struct Overview: View {
var body: some View {

ZStack{

NavigationView {

ZStack {
Color.init("Background")
.navigationBarHidden(false)
.navigationBarTitle("Overview", displayMode: .automatic)
.edgesIgnoringSafeArea(.top)

ScrollView(showsIndicators: false) {
VStack(spacing: 10) {
ForEach(0..<10) {
Text("Item ($0)")
.foregroundColor(.white)
.font(.largeTitle)
.frame(width: 340, height: 200)
.background(ColorManager.BoxColor)
.cornerRadius(10)
}
}
.frame(maxWidth: .infinity)
}
}
}
}
}
}

Answer 1

var body: some View {

NavigationView {

ScrollView(showsIndicators: false) {
VStack(spacing: 10) {
ForEach(0..<10) {
Text("Item ($0)")
.foregroundColor(.blue)
.font(.largeTitle)
.frame(width: 340, height: 200)
.background(Color(.gray))
.cornerRadius(10)
}
}
.frame(maxWidth: .infinity)
}
.navigationBarHidden(false)
.navigationBarTitle("Overview", displayMode: .automatic)
}
}

您在ZStack中有导航项。ZStack 用于在彼此之上显示重叠视图。

我相信您真正希望将标题堆叠在滚动视图上方实现的目标。这将通过VStack实现。然而，这仍然是错误的。

因为它是导航设置，所以它与导航视图内联。因此，它可以显示在导航栏中。它不需要与任何堆栈分开。