I have the following view ModalView opened by by a parent view ParentView using a button in the toolbar
** Parent View **
import SwiftUI
struct ParentView: View {
#EnvironmentObject var environmentObject: MainStore
#State private var showCreationView = false
var body: some View {
NavigationView {
Text("ENV_OBJ Count: \(environmentObject.shoppingChartFullList.count)")
.navigationBarTitle(Text("Navigation Bar Title"))
.toolbar {
ToolbarItem(placement: .bottomBar) {
Button(action: { showCreationView = true }) {
Image(systemName: "plus")
}
.sheet(isPresented: $showCreationView, content: {
ModalView(showModelView: $showCreationView)
})
}
}
}
}
}
struct ParentView_Previews: PreviewProvider {
static var previews: some View {
ParentView().environmentObject(MainStore())
}
}
** Modal View **
import SwiftUI
struct ModalView: View {
#EnvironmentObject var environmentObject: MainStore
#Binding var showModelView: Bool
#State var newItem = ShoppingChartModel()
var body: some View {
Text(/*#START_MENU_TOKEN#*/"Hello, World!"/*#END_MENU_TOKEN#*/)
Button(action: {
environmentObject.shoppingChartFullList.append(newItem)
self.showModelView = false
}) {Text("Salva")}
}
}
struct ModalView_Previews: PreviewProvider {
static var previews: some View {
ModalView(showModelView: .constant(true)).environmentObject(MainStore())
}
}
** Main Store **
import Foundation
import SwiftUI
import Combine
final class MainStore: ObservableObject {
//An observable object needs to publish any changes to its data, so that its subscribers can pick up the change.
#Published var shoppingChartFullList: [ShoppingChartModel] = load()
}
The problem is that, action executed by the Save Button in the Modal View doesn't dismiss the modal (even if it correctly updates both the Boolean variable and the Env_Obj).
Seems to be related with the toolbar... in fact if I remove the Navigation View and the toolbar, putting the button directly in a stack ... it works...
In the Parent2View I remove the NavigationView and just configured the button directly in the view after the Text property. And it is working as expected.
import SwiftUI
struct ParentView2: View {
#EnvironmentObject var environmentObject: MainStore
#State private var showCreationView = false
var body: some View {
VStack {
Text("ENV_OBJ Count: \(environmentObject.shoppingChartFullList.count)")
Button(action: { showCreationView = true }) {
Image(systemName: "plus")
}
.sheet(isPresented: $showCreationView, content: {
ModalView(showModelView: $showCreationView)
})
}
}
}
struct ParentView2_Previews: PreviewProvider {
static var previews: some View {
ParentView2().environmentObject(MainStore())
}
}
UPDATE
Ok I finally found the solution. The issue is the toolbar. If the ParentView is modified as follow, all start working well
struct ParentView: View {
#EnvironmentObject var environmentObject: MainStore
#State private var showCreationView = false
var body: some View {
NavigationView {
Text("ENV_OBJ Count: \(environmentObject.shoppingChartFullList.count)")
.navigationBarTitle("Nav View Title")
.navigationBarItems(trailing:
Button(action: {
self.showCreationView.toggle()
})
{
Image(systemName: "plus")
.font(Font.system(.title))
}
)
}
.sheet(isPresented: $showCreationView) {
ModalView(showModelView: $showCreationView)
}
}
}
Thanks!
Cristian
Related
Weird issue using new NavigationStack. When trying to push the DrinkView for the second time, it's pushed twice and the OrderFood gets view removed from the navigation.
The reason is #Published var openDrinks in the View Model. Is there is any way to solve this issue.
Thanks.
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationStack {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
NavigationLink("Hello", value: "Amr")
// Text("Hello, world!")
}
.navigationTitle("Main")
.padding()
.navigationDestination(for: String.self) { value in
OrderFood(viewModel: ViewModel())
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
class ViewModel: ObservableObject {
#Published var openDrinks: Bool = false
}
struct OrderFood: View {
#ObservedObject var viewModel: ViewModel
// #ObservedObject var viewModel = ViewModel()
var body: some View {
VStack {
Text("Add Drink")
.onTapGesture {
viewModel.openDrinks = true
}
}
.navigationTitle("Order Food")
.navigationDestination(isPresented: $viewModel.openDrinks) {
DrinksView()
.navigationTitle("Drinks")
}
.onAppear {
viewModel.openDrinks = false
}
}
}
struct OrderFood_Previews: PreviewProvider {
static var previews: some View {
OrderFood(viewModel: ViewModel())
}
}
import SwiftUI
struct DrinksView: View {
var body: some View {
NavigationLink("Ch") {
Text("Hello, World!")
}
}
}
struct DrinksView_Previews: PreviewProvider {
static var previews: some View {
DrinksView()
}
}
In ContentView, you use OrderFood(viewModel: ViewModel()), which means
you create a new ViewModel every time you navigate to OrderFood.
Try this approach, where you have one source of truth, that you pass to the details view:
struct ContentView: View {
#StateObject var viewModel = ViewModel() // <-- here
var body: some View {
NavigationStack {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
NavigationLink("Hello", value: "Amr")
}
.navigationTitle("Main")
.padding()
.navigationDestination(for: String.self) { value in
OrderFood(viewModel: viewModel) // <-- here
}
}
}
}
Note, you could also use #EnvironmentObject in this case.
EDIT-1: using #EnvironmentObject to pass the viewModel around:
struct ContentView: View {
#StateObject var viewModel = ViewModel() // <-- here
var body: some View {
NavigationStack {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
NavigationLink("Hello", value: "Amr")
}
.navigationTitle("Main")
.padding()
.navigationDestination(for: String.self) { value in
OrderFood() // <-- here
}
}.environmentObject(viewModel) // <-- here
}
}
struct OrderFood: View {
#EnvironmentObject var viewModel: ViewModel // <-- here
var body: some View {
VStack {
Text("Add Drink")
.onTapGesture {
viewModel.openDrinks = true
}
}
.navigationTitle("Order Food")
.navigationDestination(isPresented: $viewModel.openDrinks) {
DrinksView().navigationTitle("Drinks")
}
.onAppear {
viewModel.openDrinks = false
}
}
}
I have this use case where I have a parent view and a child view. Both of the views have their own corresponding ViewModels.
ParentView:
struct ParentView: View {
#StateObject var parentViewModel = ParentViewModel()
var body: some View {
NavigationView {
List {
TextField("Add Name", text: $parentViewModel.newListName)
NavigationLink(destination: ChildView()) {
Label("Select Products", systemImage: K.ListIcons.productsNr)
}
}
}
}
ParentViewModel:
class ParentViewModel: ObservableObject {
#Published var newListName: String = ""
func saveList() {
// some logic to save to CoreData, method would be called via a button
// how do I reference "someString" from ChildViewModel in this ViewModel?
}
}
ChildView:
struct ChildView: View {
#StateObject var childViewModel = ChildViewModel()
var body: some View {
NavigationView {
List{
Text("Some element")
.onTapGesture {
childViewModel.alterData()
}
}
}
}
}
ChildViewModel:
class ChildViewModel: ObservableObject {
#Published var someString: String = ""
func alterData() {
someString = "Toast"
}
}
My question now is, how do I pass the new value of "someString" from ChildViewModel into the ParentViewModel, in order to do some further stuff with it?
I've tried to create a #StateObject var childViewModel = ChildViewModel() reference in the ParentViewModel, but that does obviously not work, as this will create a new instance of the ChildViewModel and therefore not know of the changes made to "someString"
Solution:
As proposed by Josh, I went with the approach to use a single ViewModel instead of two. To achieve this, the ParentView needs a .environmentObject(T) modifier.
ParentView:
struct ParentView: View {
#StateObject var parentViewModel = ParentViewModel()
var body: some View {
NavigationView {
List {
TextField("Add Name", text: $parentViewModel.newListName)
NavigationLink(destination: ChildView()) {
Label("Select Products", systemImage: K.ListIcons.productsNr)
}
}
}.environmentObject(parentViewModel)
}
The ChildView then references that environment Object via #EnvironmentObject without an initializer:
struct ChildView: View {
#EnvironmentObject var parentViewModel: ParentViewModel
var body: some View {
NavigationView {
List{
Text("Some element")
.onTapGesture {
parentViewModel.alterData()
}
}
}
}
}
Most likely you would use a binding for this situation:
struct ChildView: View {
#Binding var name: String
var body: some View {
NavigationView {
List{
Text("Some element")
.onTapGesture {
name = "Altered!"
}
}
}
}
}
And in the parent:
struct ParentView: View {
#StateObject var parentViewModel = ParentViewModel()
var body: some View {
NavigationView {
List {
TextField("Add Name", text: $parentViewModel.newListName)
NavigationLink(destination: ChildView(name: $parentViewModel.newListName)) {
Label("Select Products", systemImage: K.ListIcons.productsNr)
}
}
}
}
Also, I think you can remove the NavigationView view from ChildView. Having it ParentView is enough.
I´m creating an App and use NavigationLink in Swift/SwiftUI, but it doesn't work anymore. I don't now since when, but 2 or 3 weeks ago, all working fine. The NavigationLinks which already are in the code for longer, working fine. But today I've used new ones, and they don´t work. It looks in the Simulator and on a real device, if they are disabled or something. They are grey and you can't click on them or if you clicked on them, nothing happens. Is there any solution?
import SwiftUI
struct MedikamenteView: View {
var body: some View {
Form {
NavigationLink(
destination: ASSView(),
label: {
Text("ASS")
})
NavigationLink(
destination: AdrenalinView(),
label: {
Text("Adrenalin")
})
}
}
}
struct MedikamenteView_Previews: PreviewProvider {
static var previews: some View {
MedikamenteView()
}
}
And for example, this one is working fine:
import SwiftUI
struct RechtView: View {
var body: some View {
Form {
NavigationLink(
destination: ParagraphenView(),
label: {
Text("Paragraphen")
})
NavigationLink(
destination: AufklaerungEinwilligungView(),
label: {
Text("Die Aufklärung mit nachfolgender Einwilligung")
})
NavigationLink(
destination: NotSanGView(),
label: {
Text("Wichtiges aus dem NotSanG")
})
}
.navigationTitle("Recht")
}
}
struct RechtView_Previews: PreviewProvider {
static var previews: some View {
RechtView()
}
}
You have to use NavigationLinks inside NavigationView{}.
Without it NavigationLink wont work.
Try this:
import SwiftUI
struct MedikamenteView: View {
var body: some View {
NavigationView {
Form {
NavigationLink(
destination: ASSView(),
label: {
Text("ASS")
})
NavigationLink(
destination: AdrenalinView(),
label: {
Text("Adrenalin")
})
}
}
}
}
struct MedikamenteView_Previews: PreviewProvider {
static var previews: some View {
MedikamenteView()
}
}
Your second code sample might be loaded from previous view which has used NavigationView {}
I can see from the comments that you've found out it will only work in a NavigationView and are now wondering why. It only matters that your view is embedded in a NavigationView directly above it the View hierarchy. For example, this code would work:
struct FirstView: View {
var body: some View {
NavigationView {
NavigationLink(label: "Go to next view", destination: NextView())
}
}
}
struct NextView: View {
...
While this won't:
struct FirstView: View {
#State var modalPresented = false
var body: some View {
NavigationView {
Button("Show fullscreen cover"){
modalPresented = true
}
}
.fullScreenCover(isPresented: $modalPresented, content: SecondView())
}
}
struct SecondView: View {
var body: some View {
NavigationLink(label: "Go to next view", destination: NextView())
// Doesn't work because the view is in a fullScreenCover and therefore not a part of the NavigationView.
}
}
I have the following in a SwiftUI app. Basically I have some settings (Settings class) that I would like to use throughout the app. I have a Settings view that shows a picker to select the value of one of the settings. And other views of the app would only use the current set value of the settings. The following setup works in the sense that in ContentView I see the correct value of firstLevel setting. But the problem is that in SettingsView, I think since selectedFirstLevel is not a #State, its correct value is not shown on the picker I navigate to select either even or odd (oddly, the first time it's correct). This selection is carried correctly to ContentView, but it's not shown correctly on SettingsView. How can I fix this issue?
Settings.swift
import Foundation
class Settings: ObservableObject {
static let shared: Settings = Settings()
#Published var firstLevel: FirstLevel = .even
}
enum FirstLevel: String, CaseIterable, Identifiable {
case even
case odd
var id: String { self.rawValue }
}
ContentView.swift
import SwiftUI
struct ContentView: View {
#State private var showSettings: Bool = false
#ObservedObject var settings = Settings.shared
var body: some View {
VStack {
SettingsButton(showSettings: $showSettings, settings: settings)
Text(settings.firstLevel.id)
.padding()
}
}
}
struct SettingsButton: View {
#Binding var showSettings: Bool
var settings: Settings
var firstLevel: Binding<FirstLevel> {
return Binding<FirstLevel>(
get: {
return self.settings.firstLevel
}) { newFirstLevel in
self.settings.firstLevel = newFirstLevel
}
}
var body: some View {
Button(action: { self.showSettings = true }) {
Image(systemName: "gear").imageScale(.large)
}
.sheet(isPresented: $showSettings) {
SettingsView(selectedFirstLevel: self.firstLevel)
}
}
}
SettingsView.swift
import SwiftUI
struct SettingsView: View {
#Binding var selectedFirstLevel: FirstLevel
var body: some View {
NavigationView {
Form {
Picker("First Level", selection: $selectedFirstLevel) {
ForEach(FirstLevel.allCases) { level in
Text(level.rawValue).tag(level)
}
}
}
.navigationBarTitle("Settings", displayMode: .inline)
}
}
}
It looks overcomplicated, moreover Binding is unreliable as communication between different view hierarchies (which is sheet in your case).
Here is simplified and worked variant. Tested with Xcode 12 / iOS 14.
struct ContentView: View {
#ObservedObject var settings = FLevelSettings.shared
var body: some View {
VStack {
SettingsButton(settings: settings)
Text(settings.firstLevel.id)
.padding()
}
}
}
struct SettingsButton: View {
#State private var showSettings: Bool = false
var settings: FLevelSettings
var body: some View {
Button(action: { self.showSettings = true }) {
Image(systemName: "gear").imageScale(.large)
}
.sheet(isPresented: $showSettings) {
FLevelSettingsView(settings: self.settings)
}
}
}
struct FLevelSettingsView: View {
#ObservedObject var settings: FLevelSettings
var body: some View {
NavigationView {
Form {
Picker("First Level", selection: $settings.firstLevel) {
ForEach(FirstLevel.allCases) { level in
Text(level.rawValue).tag(level)
}
}
}
.navigationBarTitle("Settings", displayMode: .inline)
}
}
}
Note: it can be even more simplified, if you want, due to presence of FLevelSettings.shared, so you can use it inside FLevelSettingsView directly. Just in case.
I was playing around with SwiftUI and want to be able to come back to the previous view when tapping a button, the same we use popViewController inside a UINavigationController.
Is there a provided way to do it so far ?
I've also tried to use NavigationDestinationLink to do so without success.
struct AView: View {
var body: some View {
NavigationView {
NavigationButton(destination: BView()) {
Text("Go to B")
}
}
}
}
struct BView: View {
var body: some View {
Button(action: {
// Trying to go back to the previous view
// previously: navigationController.popViewController(animated: true)
}) {
Text("Come back to A")
}
}
}
Modify your BView struct as follows. The button will perform just as popViewController did in UIKit.
struct BView: View {
#Environment(\.presentationMode) var mode: Binding<PresentationMode>
var body: some View {
Button(action: { self.mode.wrappedValue.dismiss() })
{ Text("Come back to A") }
}
}
Use #Environment(\.presentationMode) var presentationMode to go back previous view. Check below code for more understanding.
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
ZStack {
Color.gray.opacity(0.2)
NavigationLink(destination: NextView(), label: {Text("Go to Next View").font(.largeTitle)})
}.navigationBarTitle(Text("This is Navigation"), displayMode: .large)
.edgesIgnoringSafeArea(.bottom)
}
}
}
struct NextView: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
ZStack {
Color.gray.opacity(0.2)
}.navigationBarBackButtonHidden(true)
.navigationBarItems(leading: Button(action: {
self.presentationMode.wrappedValue.dismiss()
}, label: { Image(systemName: "arrow.left") }))
.navigationBarTitle("", displayMode: .inline)
}
}
struct NameRow: View {
var name: String
var body: some View {
HStack {
Image(systemName: "circle.fill").foregroundColor(Color.green)
Text(name)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
With State Variables. Try that.
struct ContentViewRoot: View {
#State var pushed: Bool = false
var body: some View {
NavigationView{
VStack{
NavigationLink(destination:ContentViewFirst(pushed: self.$pushed), isActive: self.$pushed) { EmptyView() }
.navigationBarTitle("Root")
Button("push"){
self.pushed = true
}
}
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct ContentViewFirst: View {
#Binding var pushed: Bool
#State var secondPushed: Bool = false
var body: some View {
VStack{
NavigationLink(destination: ContentViewSecond(pushed: self.$pushed, secondPushed: self.$secondPushed), isActive: self.$secondPushed) { EmptyView() }
.navigationBarTitle("1st")
Button("push"){
self.secondPushed = true;
}
}
}
}
struct ContentViewSecond: View {
#Binding var pushed: Bool
#Binding var secondPushed: Bool
var body: some View {
VStack{
Spacer()
Button("PopToRoot"){
self.pushed = false
} .navigationBarTitle("2st")
Spacer()
Button("Pop"){
self.secondPushed = false
} .navigationBarTitle("1st")
Spacer()
}
}
}
This seems to work for me on watchOS (haven't tried on iOS):
#Environment(\.presentationMode) var presentationMode
And then when you need to pop
self.presentationMode.wrappedValue.dismiss()
There is now a way to programmatically pop in a NavigationView, if you would like. This is in beta 5.
Notice that you don't need the back button. You could programmatically trigger the showSelf property in the DetailView any way you like. And you don't have to display the "Push" text in the master. That could be an EmptyView(), thereby creating an invisible segue.
(The new NavigationLink functionality takes over the deprecated NavigationDestinationLink)
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
MasterView()
}
}
}
struct MasterView: View {
#State var showDetail = false
var body: some View {
VStack {
NavigationLink(destination: DetailView(showSelf: $showDetail), isActive: $showDetail) {
Text("Push")
}
}
}
}
struct DetailView: View {
#Binding var showSelf: Bool
var body: some View {
Button(action: {
self.showSelf = false
}) {
Text("Pop")
}
}
}
#if DEBUG
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
#endif
It seems that a ton of basic navigation functionality is super buggy, which is disappointing and may be worth walking away from for now to save hours of frustration. For me, PresentationButton is the only one that works. TabbedView tabs don't work properly, and NavigationButton doesn't work for me at all. Sounds like YMMV if NavigationButton works for you.
I'm hoping that they fix it at the same time they fix autocomplete, which would give us much better insight as to what is available to us. In the meantime, I'm reluctantly coding around it and keeping notes for when fixes come out. It sucks to have to figure out if we're doing something wrong or if it just doesn't work, but that's beta for you!
Update: the NavigationDestinationLink API in this solution has been deprecated as of iOS 13 Beta 5. It is now recommended to use NavigationLink with an isActive binding.
I figured out a solution for programmatic pushing/popping of views in a NavigationView using NavigationDestinationLink.
Here's a simple example:
import Combine
import SwiftUI
struct DetailView: View {
var onDismiss: () -> Void
var body: some View {
Button(
"Here are details. Tap to go back.",
action: self.onDismiss
)
}
}
struct MainView: View {
var link: NavigationDestinationLink<DetailView>
var publisher: AnyPublisher<Void, Never>
init() {
let publisher = PassthroughSubject<Void, Never>()
self.link = NavigationDestinationLink(
DetailView(onDismiss: { publisher.send() }),
isDetail: false
)
self.publisher = publisher.eraseToAnyPublisher()
}
var body: some View {
VStack {
Button("I am root. Tap for more details.", action: {
self.link.presented?.value = true
})
}
.onReceive(publisher, perform: { _ in
self.link.presented?.value = false
})
}
}
struct RootView: View {
var body: some View {
NavigationView {
MainView()
}
}
}
I wrote about this in a blog post here.
You can also do it with .sheet
.navigationBarItems(trailing: Button(action: {
self.presentingEditView.toggle()
}) {
Image(systemName: "square.and.pencil")
}.sheet(isPresented: $presentingEditView) {
EditItemView()
})
In my case I use it from a right navigation bar item, then you have to create the view (EditItemView() in my case) that you are going to display in that modal view.
https://developer.apple.com/documentation/swiftui/view/sheet(ispresented:ondismiss:content:)
EDIT: This answer over here is better than mine, but both work: SwiftUI dismiss modal
What you really want (or should want) is a modal presentation, which several people have mentioned here. If you go that path, you definitely will need to be able to programmatically dismiss the modal, and Erica Sadun has a great example of how to do that here: https://ericasadun.com/2019/06/16/swiftui-modal-presentation/
Given the difference between declarative coding and imperative coding, the solution there may be non-obvious (toggling a bool to false to dismiss the modal, for example), but it makes sense if your model state is the source of truth, rather than the state of the UI itself.
Here's my quick take on Erica's example, using a binding passed into the TestModal so that it can dismiss itself without having to be a member of the ContentView itself (as Erica's is, for simplicity).
struct TestModal: View {
#State var isPresented: Binding<Bool>
var body: some View {
Button(action: { self.isPresented.value = false }, label: { Text("Done") })
}
}
struct ContentView : View {
#State var modalPresented = false
var body: some View {
NavigationView {
Text("Hello World")
.navigationBarTitle(Text("View"))
.navigationBarItems(trailing:
Button(action: { self.modalPresented = true }) { Text("Show Modal") })
}
.presentation(self.modalPresented ? Modal(TestModal(isPresented: $modalPresented)) {
self.modalPresented.toggle()
} : nil)
}
}
Below works for me in XCode11 GM
self.myPresentationMode.wrappedValue.dismiss()
instead of NavigationButton use Navigation DestinationLink
but You should import Combine
struct AView: View {
var link: NavigationDestinationLink<BView>
var publisher: AnyPublisher<Void, Never>
init() {
let publisher = PassthroughSubject<Void, Never>()
self.link = NavigationDestinationLink(
BView(onDismiss: { publisher.send() }),
isDetail: false
)
self.publisher = publisher.eraseToAnyPublisher()
}
var body: some View {
NavigationView {
Button(action:{
self.link.presented?.value = true
}) {
Text("Go to B")
}.onReceive(publisher, perform: { _ in
self.link.presented?.value = false
})
}
}
}
struct BView: View {
var onDismiss: () -> Void
var body: some View {
Button(action: self.onDismiss) {
Text("Come back to A")
}
}
}
In the destination pass the view you want to redirect, and inside block pass data you to pass in another view.
NavigationLink(destination: "Pass the particuter View") {
Text("Push")
}