I have a NavigationView at the root of my app that has the initial state of .navigationViewStyle(.stack), but as I navigate, I want to change that style to .doubleColumn.
From my descendent view I have tried calling navigationViewStyle(.doubleColumn) much like how you change the navigation bar title, but no luck.
Trying a ternary operator in the root view also doesn't work navigationViewStyle(isDoubleColumn ? .doubleColumn : .stack)
ROOT VIEW:
var body: some View {
NavigationView {
VStack {
//stuff
}
}
.navigationViewStyle(.stack)
}
Descendent View
var body: some View {
ScrollView{
//stuff
}
.navigationViewStyle(.doubleColumn) //doesn't work
}
DoubleColumnNavigationViewStyle is a struct that needs to be initialized. Try it this way:
.navigationViewStyle(DoubleColumnNavigationViewStyle())
The code below does the job but with the price of losing of some state data so it may not really be the solution.
struct SwiftUIView: View {
#State var isDoubleColumn = false
var body: some View {
Group {
if isDoubleColumn{
NavigationView {
Text("Hello, World!")
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
} else {
NavigationView {
Text("Hello, World!")
}
}
}
}
}
I'm not an expert but something tells me that the style can't be changed during NavigationView lifetime.
Related
I have the following:
#State private var showNext = false
...
NavigationStack {
VStack {
NavigationLink(destination: NextView(showSelf: $showNext),
isActive: $showNext) { EmptyView() }
Button("Show Next") {
showNext = true
}
}
}
...
struct NextView: View {
#Binding var showSelf: Bool
var body: some View {
Text("Next")
.navigationTitle("Next")
Button("Dismiss") {
showSelf = false
}
.padding(30)
}
}
When tapping Show Next, the NextView is shown as expected.
But when tapping Dismiss, nothing happens.
Turns out that showSelf was already false before it's set to false. So it seems something went wrong with passing the binding into NextView.
What could be wrong?
The issue was caused by NavigationStack. When I replaced it with NavigationView it worked as expected.
The isActive binding of NavigationLink does not appear to work (or to be supported) when embedded in a NavigationStack.
isActive binding is for NavigationView, try:
NavigationView {
...
}
.navigationViewStyle(.stack)`
You are trying to mix code for iOS >= 16 (NavigationStack) and for iOS < 16 (the previous way to handle NavigationLink). Similarly for the dismiss part, which is iOS < 15.
Here is your code for iOS 16:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationStack {
VStack {
NavigationLink {
NextView()
} label: {
Text("Show next view")
}
}
}
}
}
struct NextView: View {
#Environment(\.dismiss) private var dismiss
var body: some View {
VStack {
Text("You are in the next view")
Button("Dismiss", action: dismiss.callAsFunction)
}
.navigationTitle("Next")
}
}
I have used the simplest construction of NavigationLink. A more complex one would be used in conjunction with .navigationDestination. The best examples I have found are here:
https://swiftwithmajid.com/2022/06/15/mastering-navigationstack-in-swiftui-navigator-pattern/
https://swiftwithmajid.com/2022/06/21/mastering-navigationstack-in-swiftui-deep-linking/
https://www.pointfree.co/blog/posts/78-reverse-engineering-swiftui-s-navigationpath-codability
And if you want to dive more into very strange behaviour of the stack, you can look at my post here: Found a strange behaviour of #State when combined to the new Navigation Stack - Is it a bug or am I doing it wrong?
If you need to produce code for iOS < 16, you should replace NavigationStack with NavigationView and work from there.
I am making a menu for my game using NavigationView and NavigationLink. I have three views as such:
struct MainMenuView: View {
var body: some View {
NavigationView {
// relevant stuff
NavigationLink(destination: CustomGameSettingsView()) {
Text("Custom Game")
}
}
}
}
struct CustomGameSettingsView: View {
var body: some View {
NavigationView {
// ui to change game settings and stuff
NavigationLink(destination: MyGameView(customSettings)) {
Text("Play Game!")
}
}
}
}
Note that the CustomGameSettingsView shows the navigationBarBackButton
struct MyGameView: View {
var body: some View {
myGameViews {
// stuff
}
.navigationBarBackButtonHidden(true)
.navigationBarHidden(true)
.navigationBarTitle(Text("myGame"))
.edgesIgnoringSafeArea([.top, .bottom])
// these are the things I have tried to get rid of the navigationBackButton
}
.onAppear() {
self.navigationBarBackButtonHidden(true)
} // another thing I tried
}
When I navigate from MainMenuView to CustomGameSettingsView, I gain a navigationBarBackButton which stays with me when I navigate to MyGameView. How do I get rid of that on the final navigation? I want the back button on the settings menu but I want my game to be fullscreen. Is NavigationView the wrong tool in this instance?
Thank you in advance.
The problem here is you use another NavigationView{} inside the CustomGameSettingsView. You don't have to use another NavigationView because all your views (except MainMenuView) are already inside the NavigationView of the MainMenuView.
To fix this, replace the NavigationView inside the CustomGameSettingsView with a different container, then everything will work fine. Also, remove all your onAppear{}.
struct CustomGameSettingsView: View {
var body: some View {
VStack { //replace NavigationView with something else
NavigationLink(destination: MyGameView()) {
Text("Play Game!")
}
}
}
}
I have an app with a few tabs, and on one of those there is a NavigationLink which nests a couple of times.
I want to be able to switch tabs, and when going back to the other tab to have unwound all links to the root view.
I have seen these: https://stackoverflow.com/a/67014642/1086990 and https://azamsharp.medium.com/unwinding-segues-in-swiftui-abdf241be269 but they seem to be focusing on unwinding when active on the view, not switching from it.
struct MyTabView: View {
var body: some View {
TabView {
TabOne().tabItem { Image(systemName: "1.square") }
TabTwo().tabItem { Image(systemName: "2.square") }
}
}
}
struct TabOne: View {
var body: some View {
Text("1")
}
}
struct TabTwo: View {
var body: some View {
NavigationView {
NavigationLink("Go to sub view") {
TabTwoSub()
}
}
}
}
struct TabTwoSub: View {
var body: some View {
Text("Tapping \(Image(systemName: "1.square")) doesnt unwind this view back to the root of the NavigationView")
.multilineTextAlignment(.center)
}
}
Maybe I've missed something fairly basic but nothing seems to come up from searches on unwinding views when switching tabs.
I tried using the NavigationLink(isActive: , destination: , label: ) from the other SO answer but couldn't get it working in the root MyTabView.
I thought about using UserDefaults to set a isActive bool state and if not try and unwind the navigation, but that didn't seem very swifty to do.
What is happening
You'll need to keep track of the tab selection in the parent view and then pass that into the child views so that they can watch for changes. Upon seeing a change in the selection, the child view can then reset a #State variable that change the isActive property of the NavigationLink.
class NavigationManager : ObservableObject {
#Published var activeTab = 0
}
struct MyTabView: View {
#StateObject private var navigationManager = NavigationManager()
var body: some View {
TabView(selection: $navigationManager.activeTab) {
TabOne().tabItem { Image(systemName: "1.square") }.tag(0)
TabTwo().tabItem { Image(systemName: "2.square") }.tag(1)
}.environmentObject(navigationManager)
}
}
struct TabOne: View {
var body: some View {
Text("1")
}
}
struct TabTwo: View {
#EnvironmentObject private var navigationManager : NavigationManager
#State private var linkActive = false
var body: some View {
NavigationView {
NavigationLink("Go to sub view", isActive: $linkActive) {
TabTwoSub()
}
}.onChange(of: navigationManager.activeTab) { newValue in
linkActive = false
}
}
}
struct TabTwoSub: View {
var body: some View {
Text("Tapping \(Image(systemName: "1.square")) doesnt unwind this view back to the root of the NavigationView")
.multilineTextAlignment(.center)
}
}
Note: this will result in a "Unbalanced calls to begin/end appearance transitions" message in the console -- in my experience, this is not an error and not something we have to worry about
I am developing an app with SwiftUI.
I have a NavigationView and I have buttons on the navigation bar. I want to replace the current view (which is a result of a TabView selection) with another one.
Basically, when the user clicks "Edit" button, I want to replace the view with another view to make the edition and when the user is done, the previous view is restored by clicking on a "Done" button.
I could just use a variable to dynamically choose which view is displayed on the current tab view, but I feel like this isn't the "right way to do" in SwiftUI. And this way I could not apply any transition visual effect.
Some code samples to explain what I am looking for.
private extension ContentView {
#ViewBuilder
var navigationBarLeadingItems: some View {
if tabSelection == 3 {
Button(action: {
print("Edit pressed")
// Here I want to replace the tabSelection 3 view by another view temporarly and update the navigation bar items
}) {
Text("Edit")
}
}
}
}
struct ContentView: View {
var body: some View {
NavigationView {
TabView(selection: $tabSelection) {
ContactPage()
.tabItem {
Text("1")
}
.tag(1)
Text("Chats")
.tabItem() {
Text("2")
}
.tag(2)
SettingsView()
.tabItem {
Text("3")
}
.tag(3)
}.navigationBarItems(leading: navigationBarLeadingItems)
}
}
}
Thank you
EDIT
I have a working version where I simply update a toggle variable in my button action that makes my view display one or another thing, it is working but I cannot apply any animation effect on it, and it doesn't look "right" in SwiftUI, I guess there is something better that I do not know.
If you just want to add animations you can try:
struct ContentView: View {
...
#State var showEditView = false
var body: some View {
NavigationView {
TabView(selection: $tabSelection) {
...
view3
.tabItem {
Text("3")
}
.tag(3)
}
.navigationBarItems(leading: navigationBarLeadingItems)
}
}
}
private extension ContentView {
var view3: some View {
VStack {
if showEditView {
FormView()
.background(Color.red)
.transition(.slide)
} else {
Text("View 3")
.background(Color.blue)
.transition(.slide)
}
}
}
}
struct FormView: View {
var body: some View {
Form {
Text("test")
}
}
}
A possible alternative is to use a ViewRouter: How To Navigate Between Views In SwiftUI By Using An #EnvironmentObject.
I want to achieve the function. Like, "Look up" view that is from Apple.
My aim is when the sheet view push another view by navigation, the user can tap the navigation item button to close the sheet view. Like, this below gif.
I try to achieve this function.
I found a problem that is when the user tap the "Done" button. The App doesn't close the sheet view. It only pop the view to parent view. Like, this below gif.
This is my code.
import SwiftUI
struct ContentView: View {
#State var isShowSheet = false
var body: some View {
Button(action: {
self.isShowSheet.toggle()
}) {
Text("Tap to show the sheet")
}.sheet(isPresented: $isShowSheet) {
NavView()
}
}
}
struct NavView: View {
var body: some View {
NavigationView {
NavigationLink(destination: NavSubView()) {
Text("Enter Sub View")
}
} .navigationViewStyle(StackNavigationViewStyle())
}
}
struct NavSubView: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
Text("Hello")
.navigationBarItems(trailing:
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}){
Text("Done")
}
)
}
}
How did I achieve this function? :)
Please help me, thank you. :)
UPDATE: Restored original version - provided below changes should be done, as intended, to the topic starter's code. Tested as worked with Xcode 13 / iOS 15
As navigation in sheet might be long enough and closing can be not in all navigation subviews, I prefer to use environment to have ability to specify closing feature only in needed places instead of passing binding via all navigation stack.
Here is possible approach (tested with Xcode 11.2 / iOS 13.2)
Define environment key to store sheet state
struct ShowingSheetKey: EnvironmentKey {
static let defaultValue: Binding<Bool>? = nil
}
extension EnvironmentValues {
var showingSheet: Binding<Bool>? {
get { self[ShowingSheetKey.self] }
set { self[ShowingSheetKey.self] = newValue }
}
}
Set this environment value to root of sheet content, so it will be available in any subview when declared
}.sheet(isPresented: $isShowSheet) {
NavView()
.environment(\.showingSheet, self.$isShowSheet)
}
Declare & use environment value only in subview where it is going to be used
struct NavSubView: View {
#Environment(\.showingSheet) var showingSheet
var body: some View {
Text("Hello")
.navigationBarItems(trailing:
Button("Done") {
self.showingSheet?.wrappedValue = false
}
)
}
}
I haven't tried SwiftUI ever, but I came from UIKit + RxSwift, so I kinda know how binding works. I read quite a bit of sample codes from a SwiftUI Tutorial, and the way you dismiss a modal is actually correct, but apparently not for a navigation stack.
One way I learned just now is use a #Binding var. This might not be the best solution, but it worked!
So you have this $isShowSheet in your ContentView. Pass that object to your NavView struct by declaring a variable in that NavView.
ContentView
.....
}.sheet(isPresented: $isShowSheet) {
NavView(isShowSheet: self.$isShowSheet)
}
NavView
struct NavView: View {
#Binding var isShowSheet: Bool
var body: some View {
NavigationView {
NavigationLink(destination: NavSubView(isShowSheet: self.$isShowSheet)) {
Text("Enter Sub View")
}
} .navigationViewStyle(StackNavigationViewStyle())
}
}
and finally, do the same thing to your subView.
NavSubView
struct NavSubView: View {
#Environment(\.presentationMode) var presentationMode
#Binding var isShowSheet: Bool
var body: some View {
Text("Hello")
.navigationBarItems(trailing:
Button(action: {
//self.presentationMode.projectedValue.wrappedValue.dismiss()
self.isShowSheet = false
}){
Text("Done")
}
)
}
}
Now as you can see, you just need to send a new signal to that isShowSheet binding var - false.
self.isShowSheet = false
Voila!
Here's an improved version of Asperi's code from above since they won't accept my edit. Main credit goes to them.
As navigation in sheet might be long enough and closing can be not in all navigation subviews, I prefer to use environment to have ability to specify closing feature only in needed places instead of passing binding via all navigation stack.
Here is possible approach (tested with Xcode 13 / iOS 15)
Define environment key to store sheet state
struct ShowingSheetKey: EnvironmentKey {
static let defaultValue: Binding<Bool>? = nil
}
extension EnvironmentValues {
var isShowingSheet: Binding<Bool>? {
get { self[ShowingSheetKey.self] }
set { self[ShowingSheetKey.self] = newValue }
}
}
Set this environment value to root of sheet content, so it will be available in any subview when declared
#State var isShowingSheet = false
...
Button("open sheet") {
isShowingSheet?.wrappedValue = true
}
// note no $ in front of isShowingSheet
.sheet(isPresented: isShowingSheet ?? .constant(false)) {
NavView()
.environment(\.isShowingSheet, self.$isShowingSheet)
}
Declare & use environment value only in subview where it is going to be used
struct NavSubView: View {
#Environment(\.isShowingSheet) var isShowingSheet
var body: some View {
Text("Hello")
.navigationBarItems(trailing:
Button("Done") {
isShowingSheet?.wrappedValue = false
}
)
}
}