[英]NavigationView title doesn't appear when the views are in TabView in SwiftUI
I have two Views and each of them contains NavigationView with title.我有两个视图,每个视图都包含带有标题的 NavigationView。 I have created a TabBar View which also has a NavigationView on it.
我创建了一个 TabBar 视图,上面也有一个 NavigationView。
struct TabbarView: View {
var body: some View {
NavigationView{
TabView {
MainContentView()
.tabItem {
VStack {
Text("Main")
}
}.tag(0)
SearchContentView()
.tabItem {
VStack {
Text("Search")
}
}.tag(1)
}
}.navigationBarBackButtonHidden(true)
.navigationBarHidden(true)
}
} }
I have tried hiding the navigationBar for this view but that doesn't work.我曾尝试隐藏此视图的导航栏,但这不起作用。 Only the navigation bar of this view appears.
仅显示此视图的导航栏。
This is MainContentView()
这是
MainContentView()
struct MainContentView: View {
var body: some View {
NavigationView {
Text("Some Content View")
}
.navigationBarTitle("Travel")
}
} }
Any idea how to go about this.知道如何解决这个问题。 Thanks!
谢谢!
Update: Basically when I tap on a Log In Button, I am passing TabBarView() through NavigationLink.更新:基本上当我点击登录按钮时,我通过 NavigationLink 传递 TabBarView()。
NavigationLink(destination: TabbarView()) {
HStack {
Text("Log In")
}
.padding()
.frame(width: geometry.size.width - 40, height: 40)
.foregroundColor(Color.white)
.background(Color.blue)
.cornerRadius(5)
}.padding(.bottom, 40)
In doing that, it shows the TabbarView() with child views this is what I see: The space above "Travel" (navigationBarTitle of the childView) is the navigationBar of the tabbar since I am pushing it into navigationStack.在这样做时,它显示带有子视图的 TabbarView() 这就是我所看到的:“Travel”(childView 的导航栏标题)上方的空间是标签栏的导航栏,因为我将它推入导航堆栈。
The first thing to point out here is that all of the navigation bar modifiers you have in your code should be modifiers on a view inside of the NavigationView
, not modifiers on NavigationView
itself.这里首先要指出的是,您在代码中拥有的所有导航栏修饰符都应该是
NavigationView
内部视图上的修饰符,而不是NavigationView
本身的修饰符。 From the documentation for .navigationBarTitle
, for example:来自
.navigationBarTitle
的文档,例如:
This modifier only takes effect when this view is inside of and visible within a NavigationView.
此修饰符仅在此视图位于 NavigationView 内部且可见时生效。
Also, there is no need to have a NavigationView
wrapping your TabView
and then another inside your MainContentView
.此外,不需要有一个
NavigationView
包装您的TabView
,然后另一个包装在您的MainContentView
。 This will only lead to nested navigation bars, and you definitely don't want that.这只会导致嵌套导航栏,您绝对不希望这样。 Instead, just use one
NavigationView
.相反,只需使用一个
NavigationView
。 I would also suggest that you not put the NavigationView
inside the MainContentView
body.我还建议您不要将
NavigationView
放在MainContentView
正文中。
I've refactored your code to show what I'm talking about, although I wasn't sure where you were trying to use .navigationBarBackButtonHidden
and .navigationBarHidden
, so I omitted them.我已经重构了您的代码以显示我在说什么,尽管我不确定您在何处尝试使用
.navigationBarBackButtonHidden
和.navigationBarHidden
,所以我省略了它们。 Just keep in mind that they function just like .navigationBarTitle
- you need to use them as modifiers on a view inside NavigationView
, not on NavigationView
itself.请记住,它们的功能就像
.navigationBarTitle
- 您需要将它们用作NavigationView
内部视图的修饰符,而不是NavigationView
本身。
struct TabBarView: View {
var body: some View {
TabView {
NavigationView {
MainContentView()
}
.tag(0)
.tabItem {
Text("Main")
}
SearchContentView()
.tag(1)
.tabItem {
Text("Search")
}
}
}
}
struct MainContentView: View {
var body: some View {
Text("Some Content View")
.navigationBarTitle("Travel")
}
}
As you might notice, I also removed the VStack
from .tabItem
.正如你可能会注意到,我也去掉了
VStack
从.tabItem
。 You can put both Text
and Image
inside .tabItem
without the need for a VStack
, and if I'm not mistaken, .tabItem
ignores anything that is not Text
or Image
anyway.您可以将
Text
和Image
放在.tabItem
而无需VStack
,如果我没记错的话, .tabItem
忽略任何不是Text
或Image
的内容。
If you need Login/SignUp View before tabview do not use NavigationView to wrap it.如果在 tabview 之前需要登录/注册视图,请不要使用 NavigationView 来包装它。 In the Login/Sign up view
在登录/注册视图中
@EnvironmentObject var authService:AuthService
var body: some View{
ZStack{
if(!authService.isSignedIn){
Button(action: {
self.authService.signIn()
}) {
Text("Login")
}
}
else{
TabBarView()
}
}
}
In the subviews you can control the isSignedIn variable with @EnvironmentObject
and change that value when Signed Out This is an example of the TabBarView()
used before:在子视图中,您可以使用
@EnvironmentObject
控制isSignedIn变量并在注销时更改该值这是之前使用的TabBarView()
的示例:
var body: some View {
TabView {
NavigationView{
FirstView()
}
.tabItem {
VStack{
Image("first")
Text("First")
}
}
NavigationView{
SecondView()
}
.tabItem {
VStack{
Image("second")
Text("Second")
}
}
}
}
This is could be one of the tabviews:这可能是 tabviews 之一:
@EnvironmentObject var authService:AuthService
var body: some View {
TextView("Hello World")
.navigationBarItems(trailing: LogOutButton(logOutFunction: authService.signOut))
}
This works too in iOS 13:这也适用于 iOS 13:
var body: some View {
TabView {
NavigationView {
FirstTabbarView(viewModel: viewModel)
.navigationBarTitle("NavBar title Tabbar1", displayMode: .inline)
}
.tabItem {
Image(systemName: "house.fill")
Text("Tab bar 1")
}
NavigationView {
SecondTabbarView(viewModel: viewModel)
.navigationBarTitle("Navbar title Tabbar 2", displayMode: .inline)
}
.tabItem {
Image(systemName: "person.fill")
Text("Tab bar 2")
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.