Im trying to link a button action in SomeView1() to navigate to a someView2() without having the back button at the top of the screen. Instead, I want to add another button in SomeView2() that will navigate back to SomeView1(). is this possible in SwiftUI yet?
SomeView1()
struct SomeView1: View {
var body: some View {
NavigationView {
VStack {
//...view's content
NavigationLink(destination: SomeView2()) {
Text("go to SomeView2")
}
Spacer()
}
}
}
}
SomeView2()
struct SomeView2: View {
var body: some View {
NavigationView {
VStack {
//...view's content
NavigationLink(destination: SomeView1()) {
Text("go to SomeView1")
}
Spacer()
}
}
}
}
this is what it looks like:
The right way to get what you want here is to use the presentationMode environment variable:
import SwiftUI
struct View2: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var body: some View {
VStack {
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}) {
Text("POP")
}
}
.navigationBarTitle("")
.navigationBarBackButtonHidden(true)
.navigationBarHidden(true)
}
}
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: View2()) {
Text("PUSH")
.navigationBarTitle("")
.navigationBarHidden(true)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
You can do something like this in SomeView2():
NavigationView {
VStack {
//...view's content
NavigationLink(destination: SomeView1()) {
Text("go to SomeView1")
}
Spacer()
}
}.navigationBarBackButtonHidden(true)
I believe that you should use only one NavigationView for the whole navigation process. Now you have three NavigationViews inside each other, which produces three back buttons.
So in your case it would become something like this:
struct SomeView1InsideNavigationView: View { // This should be the first view you present
var body: some View {
NavigationView { // Use NavigationView only once
SomeView1()
}
}
}
struct SomeView1: View {
var body: some View {
VStack { // Do *not* use NavigationView here
//...view's content
NavigationLink(destination: SomeView2()) {
Text("go to SomeView2")
}
Spacer()
}
}
}
struct SomeView2: View {
var body: some View {
VStack { // Do *not* use NavigationView here
//...view's content
NavigationLink(destination: SomeView1()) {
Text("go to SomeView1")
}
Spacer()
}
}
}
Related
So I've got a NavigationView embedded inside of a TabView that is in the Page View Style. Upon first load the NavigationView will start inside itself, and then once reloaded it shows normally. I am unsure as to what is causing this. And I've made a GIF to better illustrate the problem:
And here is my code:
import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
SettingsView()
EmptyView()
EmptyView()
EmptyView()
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
}
}
struct SettingsView: View {
var body: some View {
NavigationView {
List {
Section(header: Text("General")) {
NavigationLink(destination: SettingsItem(title: "1")) {
Text("1")
}
NavigationLink(destination: SettingsItem(title: "2")) {
Text("2")
}
NavigationLink(destination: SettingsItem(title: "3")) {
Text("3")
}
NavigationLink(destination: SettingsItem(title: "4")) {
Text("4")
}
}
}
.listStyle(InsetGroupedListStyle())
.navigationTitle("Settings")
}
}
}
struct SettingsItem: View {
#State var title = "Title"
var body: some View {
NavigationView {
List {
}
}
.navigationTitle(title)
}
}
struct EmptyView: View {
var body: some View {
ZStack{
Color.green
Text("Empty View")
.padding()
}
.border(Color.black, width: 8)
}
}
Believe it or not, this has nothing to do with the TabView(). This is actually an issue in the SettingsView(). SwiftUI is defaulting to a split view. As a result, you are getting an empty view because you haven't actually navigated to any particular view, with the Settings back button showing. The fix to make this behave as you would expect is to add a .navigationViewStyle(StackNavigationViewStyle() on the NavigationView in SettingsView which forces SettingsView to display as a single view like this:
struct ContentView: View {
var body: some View {
TabView {
SettingsView()
BlankView(color: .green)
BlankView(color: .blue)
BlankView(color: .red)
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
}
}
struct SettingsView: View {
var body: some View {
NavigationView {
List {
Section(header: Text("General")) {
NavigationLink(destination: SettingsItem(title: "1")) {
Text("1")
}
NavigationLink(destination: SettingsItem(title: "2")) {
Text("2")
}
NavigationLink(destination: SettingsItem(title: "3")) {
Text("3")
}
NavigationLink(destination: SettingsItem(title: "4")) {
Text("4")
}
}
}
.listStyle(InsetGroupedListStyle())
.navigationTitle("Settings")
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct SettingsItem: View {
#State var title = "Title"
var body: some View {
NavigationView {
List {
}
}
.navigationTitle(title)
}
}
struct BlankView: View {
let color: Color
var body: some View {
ZStack{
color
Text("Blank View")
.padding()
}
.border(Color.black, width: 8)
}
}
Also, I edited your code a bit for clarity. EmptyView() is already designated by the system, so I changed it to BlankView() I am not sure why the compiler doesn't have a problem with you naming a struct EmptyView(), but you really shouldn't use that name. I also had the BlankView() show different colors so it was clear you were navigating to separate views.
to make it short: I want to have the same view of the list like in the first image i shared. But when I add a navigation bar item the list looks strange to me. It this a bug of the new version of Swift/XCode or needs something to be changed?
Code:
import SwiftUI
import CoreData
struct ContentView: View {
var body: some View {
NavigationView {
List{
Text("test1")
Text("test2")
Text("test3")
}
.navigationTitle("Test")
// .navigationBarItems(leading:
// Text("Test")
// )
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Try using .navigationViewStyle as below:
struct ContentView: View {
#State private var isFullScreen = false
var body: some View {
NavigationView {
List{
Text("One")
Text("Two")
}
.navigationTitle("Testt")
.navigationBarItems(leading: Text("Add"))
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
Hey! Give This A Try!
var body: some View {
NavigationView {
List{
Text("One")
Text("Two")
}
.navigationTitle("Testt, displayMode: .inline)
.navigationBarItems(leading: Text("Add"))
}
}
}
I have lately been trying to make a tvOS app, but have run into the following rather annoying problem. I can't use navigation inside a TabView and still have the menu button on the remove take me back to the previous state.
struct TestView: View {
#State var selection : Int = 0
var body: some View {
TabView(selection: self.$selection) {
ExpView()
.tabItem {
HStack {
Image(systemName: "magnifyingglass")
Text("Explore")
}
}
.tag(0)
}
}
}
struct ExpView: View {
var body: some View {
NavigationView {
NavigationLink(destination: DetailView(title: "Hey")) {
Text("Detail")
}
}
}
}
struct DetailView: View {
var title : String
var body: some View {
VStack {
Text(title)
}
}
}
My question is: Is there any way to enable the menu button to go back to the previous view in the hierachy without dismissing the app completely?
You don't need to call dismiss on Menu it is called automatically for NavigationLink (so calling one more dismiss quits to main menu)
Here are fixed views. Tested with Xcode 11.4
struct ExploreView: View {
var body: some View {
NavigationView {
NavigationLink(destination: DetailView(title: "Hey")) {
Text("Detail")
}
}
}
}
struct DetailView: View {
var title : String
var body: some View {
VStack {
Text(title)
}
}
}
So I found a workaround for the issue.
If you place the navigationView outside the TabView and then use the following code it works:
struct TestView: View {
#State var selection : Int = 0
#State var hideNavigationBar : Bool
var body: some View {
NavigationView {
TabView(selection: self.$selection) {
ExpView(hideNavigationBar: self.$hideNavigationBar)
.tabItem {
HStack {
Image(systemName: "magnifyingglass")
Text("Explore")
}
}
.tag(0)
}
}
}
}
struct ExpView: View {
#Binding var hideNavigationBar : Bool
var body: some View {
NavigationLink(destination: DetailView(title: "Hey")) {
Text("Detail")
}.navigationBarTitle("")
.navigationBarHidden(self.hideNavigationBar)
.onAppear {
self.hideNavigationBar = true
}
}
}
struct DetailView: View {
var title : String
var body: some View {
VStack {
Text(title)
}
}
}
I have a Content file and am hiding the navigation bar because it takes up space and pushes elements down. One of the buttons in the ContentView redirects (using a navigation link) to another view. In this other view, the navigationBar is still hidden....for simplicity sake, I'll cut out some of the code from ContentView:
//this is the view that looks "fine" (i.e. the navigation bar takes up no space)
struct ContentView: View {
#State private var isPresentedSettings = false
var body: some View {
NavigationView {
ZStack {
VStack {
SettingsButton(isPresentedSettings: $isPresentedSettings)
}
}.navigationBarTitle("").navigationBarHidden(true)
}
}
}
//this is the button that pulls up the settings page view
struct SettingsButton: View {
#Binding var isPresentedSettings: Bool
var body: some View {
NavigationLink (destination: SettingsPageView(isPresentedSettings:
self.$isPresentedSettings)) {
Button(action: { self.isPresentedSettings.toggle() }, label: { Text("Button") })
}
}
}
//This is the view that should have a navigationbar but it doesn't
struct SettingsPageView: View {
#Binding var isPresentedSettings: Bool
var body: some View {
NavigationView {
VStack {
Text("This is a view")
}.navigationBarTitle("Settings", displayMode: .inline)
}
}
}
Also...there may have been typos because I just copied the code over from another computer. Sorry and thank you in advance!
Firstly, you don't need to have this isPresentedSettings variable for presenting a NavigationLink.
NavigationLink(destination: SettingsPageView()) {
Text("Button")
}
And there should be only one NavigationView in your view hierarchy.
This is how your final code can look like:
struct ContentView: View {
#State private var navBarHidden = true
var body: some View {
NavigationView {
ZStack {
VStack {
SettingsButton(navBarHidden: $navBarHidden)
}
}
.navigationBarHidden(navBarHidden)
}
}
}
struct SettingsButton: View {
#Binding var navBarHidden: Bool
var body: some View {
NavigationLink(destination: SettingsPageView(navBarHidden: $navBarHidden)) {
Text("Show View")
}
}
}
struct SettingsPageView: View {
#Binding var navBarHidden: Bool
var body: some View {
VStack {
Text("This is a view")
}
.navigationBarTitle("Settings", displayMode: .inline)
.onAppear {
self.navBarHidden = false
}
.onDisappear {
self.navBarHidden = true
}
}
}
When swiping from the View with navigationBarItems, canceling the swipe and returning to the previous screen, the navigationBar on the previous screen remained without disappearing.
Is this a bug?
Or is my implementation wrong?
You can check the phenomenon here.
struct TopView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: DetailView()) {
Text("Detail")
}
}
.navigationBarTitle("Top")
}
}
}
struct DetailView: View {
var body: some View {
VStack {
NavigationLink(destination: EditView()) {
Text("Edit")
}
}
.navigationBarTitle("Detail", displayMode: .inline)
}
}
struct EditView: View {
#Environment(\.presentationMode) private var presentationMode: Binding<PresentationMode>
var body: some View {
VStack {
Text("Title")
}
.navigationBarTitle("Edit", displayMode: .inline)
.navigationBarItems(
trailing:
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}) {
Text("Save")
}
)
}
}
#Environment (. PresentationMode) private var presentationMode:
Binding
If this were not present, it would not occur.
Here is fix
struct DetailView: View {
var body: some View {
VStack {
NavigationLink(destination: EditView()) {
Text("Edit")
}.isDetailLink(false) // << here !!
}
.navigationBarTitle("Detail", displayMode: .inline)
}
}