I am trying to add a custom navigation title to my SwiftUI project. I have a few tabs and I’m getting a weird bug. For every tab I am getting the same navigation title of "Home" and I can’t seem to change it or remove it. I’m not sure why there is even a title for each tab as I never added one. I have tried using .navigationTitle("my title") to edit the tab title. This is not working though, anyone know a fix? I will attach some code below.
TabView(){
FeedView()
.navigationTitle("hustles")
.tabItem {
Image(systemName: "h.circle")
}
JobsView()
.tabItem {
Image(systemName: "j.circle")
}
}
var body: some View {
VStack(alignment: .leading){
tweetsView
Spacer()
}
.navigationTitle("Profile")
}
just add navigation view inside each tab item and then add it the specific view inside the navigation view
Related
I created a macOS App with a NavigationView and a Toolbar.
Somehow next to my toolbarItem there is a lot of space.. So whenever I change the size of my apps window the toolbarItem disappears. Despite there is still a lot of space for my item.
I did not find out how to reduce that space..
Can you help me?
var body: some View {
NavigationView {
}
.toolbar(content: {
ToolbarItem(placement: .navigation) {
Image(systemName: "gearshape")
.frame(height: 20)
}
})
I found the problem.
The title is existing and just invisible.
You can remove the title by adding .windowToolbarStyle(.unifiedCompact(showsTitle: false))
to the WindowGroup.
The NavigationViews inside my PageTabView are wrong aligned on first appear.
When i scroll to another page on my PageTabView and go back to the first page, the alignment is correct.
The content of the navigationview (red) is beneath the navigationbar on first appear.
Image of first appearance of the NavigationView
Image of the second appearance of the NavigationView
struct ContentView: View {
var body: some View {
TabView {
ForEach(0..<3) { index in
NavigationView {
Color.red
.navigationTitle("\(index). Page")
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
.tabViewStyle(.page)
}
}
Edit:
I want to build the layout of the rooms tab in the apple home app in compact mode. Therefore the TabView in the code above gets wrapped in another tabview without the pagetabviewstyle modifier.
This works, but the same extracted problem in the code above happens.
var body: some View {
NavigationView {
TabView {
ForEach(0..<3) { index in
Color.red
.navigationTitle("\(index). Page")
}
}
.tabViewStyle(.page)
}
}
Just moved NavigationView outside, it fixed the problem
I am trying to make it so that when I click the icon, the "scoreView()" is opened. When I click it, nothing works right now. Here is the code:
HStack {
Image(systemName: "arrow.counterclockwise")
NavigationLink(destination: scoreView(scoreTracker: $scoreTracker)) {
Spacer()
Image(systemName: "list.bullet")
}
}
Does it have something to do with the fact that I don't have a navigationView? I'm new to this and experimenting so I'm not very clear on it.
EDIT:
I have added a NavigationView, yet the NavigationLink covers half the screen, and when clicked, the view is only changed in that square.
Before clicking the NavigationLink
After clicking the NavigationLink
HStack {
Image(systemName: "arrow.counterclockwise")
NavigationView {
NavigationLink(destination: scoreView(scoreTracker: $scoreTracker)) {
Image(systemName: "list.bullet")
}
}
}
Does it have something to do with the fact that I don't have a navigationView?
Yes. According to the documentation:
Users click or tap a navigation link to present a view inside a NavigationView.
It will only work inside a NavigationView. If you're not using one, consider sheet or fullScreenCover instead. Or, make your own overlay with a ZStack.
Example NavigationView usage:
struct ContentView: View {
var body: some View {
NavigationView { /// directly inside `var body: some View`
VStack { /// if you have multiple views, make sure to put them in a `VStack` or similar
Text("Some text")
/// `ScoreView` should be capitalized
NavigationLink(destination: ScoreView(scoreTracker: $scoreTracker)) {
Image(systemName: "list.bullet")
}
}
}
}
}
I am creating a iOS app with XCode. All source code has been written and compiled.
The app runs in the iOS simulator.
The user interface was created in SwiftUI and it appears as expected.
The navigation seems to be working across the screens but I cannot have the menu as designed and I see a double toolbar where the back button appears.
The navigation happens by NavigationLinks associated to buttons.
If I navigate one screen deep I have a back button and a back icon. It seems that the back button is a menu in fact.
If I navigate two screens deep the back button shows a menu with two back options, one lets the user navigate back one level, the other lets the user navigate back two levels.
The main problem is that in the main screen no menu appears.
It doesn't depend on the content of the main view. Indeed if it is stripped down from the View still I do not have the menu, but I do not have the double toolbar either.
var body: some View {
NavigationView {
VStack{
Text("HELLO")
/*here was a sort of master-detail layout*/
}
}.navigationViewStyle(StackNavigationViewStyle()).navigationTitle("SwiftUI").toolbar {
ToolbarItem(placement: .primaryAction) {
Menu
{ //this is what the menu content is like but it never appeared
NavigationLink(destination:HelpView())
{ Label(help_menu_item, systemImage: "")
}
Button(action: {}) {
Label(liability_disclaimer_menu_item, systemImage: "")
}
Button(action: {}) {
Label(about_menu_item, systemImage: "")
}
//other buttons
}//menu
label: {
Label("Menu", systemImage: "ellipsis")
}
}
}
} //body
What changes or checks can be done? I want the menu and a single toolbar.
I also tried commenting things and trying step by step additions but even the simplest case does not work.
Put the toolbar modifier on the top-level view within the NavigationView, not on the NavigationView itself.
I currently have a modal view in SwiftUI that contains a series of NavigationLinks to different views. However, when I go to one of the other views it pushes all the content down leaving a empty forehead at the top of the view. How do I fix this?
I have included an example screenshot below.
To further clarify, there is a main view with a button that opens a Modal view. This modal contains a navigation view with a series of NavigationLink Buttons. When opening the navigation links within the modal, that is when the view is pushed down.
You have a large navigation bar, try to set navigationBar displayMode to .inline
.navigationBarTitle(Text(""), displayMode: .inline)
This probably happens because the view you push to from the NavigationView is also wrapped in a NavigationView.
struct SettingsView: View {
var body: some View {
NavigationView {
NavigationLink(destination: IAPView()) {
Text("In App Purchase")
}
}
}
}
You probably have this in the IAPView()
struct IAPView: View {
var body: some View {
NavigationView { <-- this is causing it
// your buttons here
}
}
}
You still have the default navigation bar space in your view. You need to add both these two view modifiers.
.navigationBarTitle("")
.navigationBarHidden(true)