I have EditNoteHost view which displays NoteView or EditNote depending on editMode environment variable. Aslo Cancel button is displayed in edit mode:
struct EditNoteHost: View {
#EnvironmentObject var modelData: ModelData
#Environment(\.editMode) var editMode
#State private var draftNote = Note.default
var body: some View {
VStack(alignment: .leading, spacing: 20) {
HStack {
if editMode?.wrappedValue == .active {
Button("Cancel") {
draftNote = modelData.selectedNote
editMode?.animation().wrappedValue = .inactive
}
}
Spacer()
EditButton()
}
if editMode?.wrappedValue == .inactive {
NoteView(note: modelData.selectedNote)
} else {
EditNote(note: $draftNote)
.onAppear {
draftNote = modelData.selectedNote
}
.onDisappear {
modelData.selectedNote = draftNote
}
}
}
.padding()
}
}
struct EditNoteHost_Previews: PreviewProvider {
static var previews: some View {
EditNoteHost()
.environmentObject(ModelData())
}
}
This code works fine.
Now I want to use EditNoteHost in NavigationLink and start it in edit mode:
NavigationLink(destination: EditNoteHost().environment(\.editMode, Binding.constant(EditMode.active)).environmentObject(modelData)) {
Image(systemName: "plus")
}
This part of code opens EditNoteHost in edit mode if click +. However, Done and Cancel buttons do nothing when tap.
How can I fix this?
Screenshot
You are setting editMode using .constant(EditMode.active), it will remain active. So do not set the environment for editMode; instead use:
NavigationLink(destination: EditNoteHost()) {
Image(systemName: "plus")
}
and in EditNoteHost, use:
.onAppear() {
editMode?.animation().wrappedValue = .active
}
Related
I try to switch from one screen to another by pressing a button (see full code below). The switch from the first view to the second view (and vice versa) works, but no animation is taking place.
Why does this behavior happen?
Full code:
struct ContentView: View {
#AppStorage("firstViewActive") var isFirstViewActive: Bool = true
var body: some View {
if isFirstViewActive {
FirstView()
} else {
SecondView()
}
}
}
struct FirstView: View {
#AppStorage("firstViewActive") var isFirstViewActive: Bool = true
var body: some View {
ZStack {
Color(.red).ignoresSafeArea(.all, edges: .all)
VStack {
Spacer()
Text("This is the first view")
Spacer()
Button {
withAnimation {
isFirstViewActive = false
}
} label: {
Text("Go to second view")
}
Spacer()
}
}
}
}
struct SecondView: View {
#AppStorage("firstViewActive") var isFirstViewActive: Bool = false
var body: some View {
ZStack {
Color(.blue).ignoresSafeArea(.all, edges: .all)
VStack {
Spacer()
Text("This is the second view")
Spacer()
Button {
withAnimation {
isFirstViewActive = true
}
} label: {
Text("Go to first view")
}
Spacer()
}
}
}
}
The problem is with
#AppStorage("firstViewActive") var isFirstViewActive: Bool = true
If you change that to
#State var isFirstViewActive: Bool = true
and use #Binding in subviews, you will get the default animations.
In iOS 16, there seems to be a problem with #AppStorage vars and animation. But you can refer to this workaround
I have a requirement where we need to keep close active unless bottom sheet is not closed. I have seen similar implementations in iOS maps where search keyboard is opened until the view is fully dismissed.
What I have currently :-
What I want :- https://drive.google.com/file/d/1SmXniFp0ZTF5igMzk6gk3eflCeP1xjn6/view?usp=share_link
This is code which i use to to present iOS native sheet :-
struct ContentView: View {
#State var isPresented = false
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.onTapGesture {
isPresented.toggle()
}
.sheet(isPresented: $isPresented) {
BottomSheetViewRepresentable(content: {
NavigationView {
DemoView()
}
.navigationTitle("Hey")
}, detents: [.large()])
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct DemoView: View {
var body: some View{
if #available(iOS 16.0, *) {
ZStack {
TextField("", text: .constant("Hey"))
}
.scrollDismissesKeyboard(.never)
} else {
// Fallback on earlier versions
Color.yellow
}
}
}
I see you have added .scrollDismissesKeyboard(.never) on the ZStack which seems not working.
Try wrapping content in a List or ScrollView, then set scrollDismissesKeyboard to never.
Examples -
var body: some View {
ScrollView {
VStack {
TextField("Name", text: $username)
.textFieldStyle(.roundedBorder)
TextEditor(text: $bio)
.frame(height: 400)
.border(.quaternary, width: 1)
}
.padding(.horizontal)
}
.scrollDismissesKeyboard(.never)
}
List example -
struct KeyboardDismissExample: View {
#State private var text = ""
var body: some View {
List {
ForEach(0..<100) { i in
TextField(("Item \(i)"), text: .constant(""))
}
}
.scrollDismissesKeyboard(.never)
}
}
I'm trying to use a pop up menu (that appears when the user triggers it) to make the users of my app able to change the subview that is shown inside my main view between a Subview1 and a Subview2.
I'm trying to do that using global Bool variables that are changed when a button in the view inside the sheet is pressed. Based on those values, the main view should return a different subview
The problem is that when I try to select one option from the view that appears inside the sheet, the action of the Button is performed and the sheet is dismissed but the subview displayed by the main view remains unchanged
Is there a way to change the subview or reload the main view?
The code I'm using for the main view is:
struct ContentView: View {
#State var showMenu = false
var body: some View {
if(subview1Selected){
return AnyView(SubView1())
} else if (subview2Selected){
return AnyView(SubView2())
}
else {
return AnyView(
Button(action: {
showMenu = true
})
{
Text("Button")
}
.sheet(isPresented: $showMenu, content: {
MenuView()
})
)
}
}
the code I'm using for the pop-up sheet that is used like a menu is:
struct MenuView: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
List{
Button(action: {
subview1Selected = true
subview2Selected = false
self.presentationMode.wrappedValue.dismiss()
})
{
Text("Subview1")
}
Button(action: {
subview2Selected = true
subview1Selected = false
self.presentationMode.wrappedValue.dismiss()
})
{
Text("Subview2")
}
}
}
}
The subviews are:
struct SubView1: View {
#State var showMenu = false
var body: some View {
Button(action: {
showMenu = true
})
{
Text("SubView1")
}
.sheet(isPresented: $showMenu, content: {
MenuView()
})
}
}
and:
struct SubView2: View {
#State var showMenu = false
var body: some View {
Button(action: {
showMenu = true
})
{
Text("SubView2")
}
.sheet(isPresented: $showMenu, content: {
MenuView()
})
}
}
I think this is what you are trying to do. You can pass the #State showMenu variable as a #Binding variable into the menu. You can use a Bool if you only have 2 views, but it's more practical to use a custom enum, which I added for you. Also, the menu button should probably be separate from the subviews.
struct ContentView: View {
enum SubViewOption {
case subview1
case subview2
}
#State var showMenu = false
#State var subviewSelected: SubViewOption?
var body: some View {
ZStack() {
switch subviewSelected {
case .subview1:
SubView1()
case .subview2:
SubView2()
default:
Text("Select a view to begin.")
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.overlay(
Button(action: {
showMenu.toggle()
}, label: {
Text("Menu")
.padding()
.frame(maxWidth: .infinity)
.foregroundColor(.white)
.background(Color.gray.cornerRadius(30))
.padding()
})
, alignment: .bottom
)
.sheet(isPresented: $showMenu, content: {
MenuView(subviewSelected: $subviewSelected)
})
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct MenuView: View {
#Environment(\.presentationMode) var presentationMode
#Binding var subviewSelected: ContentView.SubViewOption?
var body: some View {
List {
Button(action: {
subviewSelected = .subview1
presentationMode.wrappedValue.dismiss()
}, label: {
Text("Subview1")
})
Button(action: {
subviewSelected = .subview2
presentationMode.wrappedValue.dismiss()
}, label: {
Text("Subview2")
})
}
}
}
struct SubView1: View {
var body: some View {
ZStack {
Color.red
.edgesIgnoringSafeArea(.all)
Text("THIS IS SUBVIEW 1")
.foregroundColor(.white)
}
}
}
struct SubView2: View {
var body: some View {
ZStack {
Color.blue
.edgesIgnoringSafeArea(.all)
Text("THIS IS SUBVIEW 2")
.foregroundColor(.white)
}
}
}
I have a view that can be shown either as a modal, or simply pushed onto a navigation stack. When it's pushed, it has the back button in the top left, and when it's shown as a modal, I want to add a close button (many of my testers were not easily able to figure out that they could slide down the modal and really expected an explicit close button).
Now, I have multiple problems.
How do I figure out if a View is shown modally or not? Or alternatively, if it's not the first view on a navigation stack? In UIKit there are multiple ways to easily do this. Adding a presentationMode #Environment variable doesn't help, because its isPresented value is also true for pushed screens. I could of course pass in a isModal variable myself but it seems weird that's the only way?
How do I conditionally add a leading navigationBarItem? The problem is that if you give nil, even the default back button is hidden.
Code to copy and paste into Xcode and play around with:
import SwiftUI
struct ContentView: View {
#State private var showModal = false
var body: some View {
NavigationView {
VStack(spacing: 20) {
Button("Open modally") {
self.showModal = true
}
NavigationLink("Push", destination: DetailView(isModal: false))
}
.navigationBarTitle("Home")
}
.sheet(isPresented: $showModal) {
NavigationView {
DetailView(isModal: true)
}
}
}
}
struct DetailView: View {
#Environment(\.presentationMode) private var presentationMode
let isModal: Bool
var body: some View {
Text("Hello World")
.navigationBarTitle(Text("Detail"), displayMode: .inline)
.navigationBarItems(leading: closeButton, trailing: deleteButton)
}
private var closeButton: some View {
Button(action: { self.presentationMode.wrappedValue.dismiss() }) {
Image(systemName: "xmark")
.frame(height: 36)
}
}
private var deleteButton: some View {
Button(action: { print("DELETE") }) {
Image(systemName: "trash")
.frame(height: 36)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
If I change closeButton to return an optional AnyView? and then return nil when isModal is false, I don't get a back button at all. I also can't call navigationBarItems twice, once with a leading and once with a trailing button, because the latter call overrides the first call. I'm kinda stuck here.
Okay, I managed it. It's not pretty and I am very much open to different suggestions, but it works 😅
import SwiftUI
extension View {
func eraseToAnyView() -> AnyView {
AnyView(self)
}
public func conditionalNavigationBarItems(_ condition: Bool, leading: AnyView, trailing: AnyView) -> some View {
Group {
if condition {
self.navigationBarItems(leading: leading, trailing: trailing)
} else {
self
}
}
}
}
struct ContentView: View {
#State private var showModal = false
var body: some View {
NavigationView {
VStack(spacing: 20) {
Button("Open modally") {
self.showModal = true
}
NavigationLink("Push", destination: DetailView(isModal: false))
}
.navigationBarTitle("Home")
}
.sheet(isPresented: $showModal) {
NavigationView {
DetailView(isModal: true)
}
}
}
}
struct DetailView: View {
#Environment(\.presentationMode) private var presentationMode
let isModal: Bool
var body: some View {
Text("Hello World")
.navigationBarTitle(Text("Detail"), displayMode: .inline)
.navigationBarItems(trailing: deleteButton)
.conditionalNavigationBarItems(isModal, leading: closeButton, trailing: deleteButton)
}
private var closeButton: AnyView {
Button(action: { self.presentationMode.wrappedValue.dismiss() }) {
Image(systemName: "xmark")
.frame(height: 36)
}.eraseToAnyView()
}
private var deleteButton: AnyView {
Button(action: { print("DELETE") }) {
Image(systemName: "trash")
.frame(height: 36)
}.eraseToAnyView()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
I don't see any trouble, just add Dismiss button to your navigation bar. You only have to rearrange your View hierarchy and there is no need to pass any binding to your DetailView
import SwiftUI
struct DetailView: View {
var body: some View {
Text("Detail View")
}
}
struct ContentView: View {
#State var sheet = false
var body: some View {
NavigationView {
VStack(spacing: 20) {
Button("Open modally") {
self.sheet = true
}
NavigationLink("Push", destination: DetailView())
}.navigationBarTitle("Home")
}
.sheet(isPresented: $sheet) {
NavigationView {
DetailView().navigationBarTitle("Title").navigationBarItems(leading: Button(action: {
self.sheet.toggle()
}, label: {
Text("Dismiss")
}))
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
You still can dismiss it with swipe down, you can add some buttons (as part of DetailView declaration) ... etc.
When pushed, you have default back button, if shown modaly, you have dismiss
button indeed.
UPDATE (based od discussion)
.sheet(isPresented: $sheet) {
NavigationView {
GeometryReader { proxy in
DetailView().navigationBarTitle("Title")
.navigationBarItems(leading:
HStack {
Button(action: {
self.sheet.toggle()
}, label: {
Text("Dismiss").padding(.horizontal)
})
Color.clear
Button(action: {
}, label: {
Image(systemName: "trash")
.imageScale(.large)
.padding(.horizontal)
})
}.frame(width: proxy.size.width)
)
}
}
}
finally I suggest you to use
extension View {
#available(watchOS, unavailable)
public func navigationBarItems<L, T>(leading: L?, trailing: T) -> some View where L : View, T : View {
Group {
if leading != nil {
self.navigationBarItems(leading: leading!, trailing: trailing)
} else {
self.navigationBarItems(trailing: trailing)
}
}
}
}
Whenever we provide .navigationBarItems(leading: _anything_), ie anything, the standard back button has gone, so you have to provide your own back button conditionally.
The following approach works (tested with Xcode 11.2 / iOS 13.2)
.navigationBarItems(leading: Group {
if isModal {
closeButton
} else {
// custom back button here calling same dismiss
}
}, trailing: deleteButton)
Update: alternate approach might be as follows (tested in same)
var body: some View {
VStack {
if isModal {
Text("Hello")
.navigationBarItems(leading: closeButton, trailing: deleteButton)
} else {
Text("Hello")
.navigationBarItems(trailing: deleteButton)
}
}
.navigationBarTitle("Test", displayMode: .inline)
}
I can navigate to next screen by using NavigationButton (push) or present with PresentationButton (present) but i want to push when i tap on Buttton()
Button(action: {
// move to next screen
}) {
Text("See More")
}
is there a way to do it?
You can do using NavigationLink
Note: Please try in real device. in simulator sometimes not work properly.
struct MasterView: View {
#State var selection: Int? = nil
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: DetailsView(), tag: 1, selection: $selection) {
Button("Press me") {
self.selection = 1
}
}
}
}
}
}
struct DetailsView: View {
#Environment(\.presentationMode) var presentation
var body: some View {
Group {
Button("Go Back") {
self.presentation.wrappedValue.dismiss()
}
}
}
}
As you can see to display the new view, add the NavigationLink with isActive: $pushView using <.hidden()> to hide the navigation "arrow".
Next add Text("See More") with tapGesture to make the text respond to taps. The variable pushView will change (false => true) when you click "See More" text.
import SwiftUI
struct ContentView: View {
#State var pushView = false
var body: some View {
NavigationView {
List {
HStack{
Text("test")
Spacer()
NavigationLink(destination: NewView(), isActive: $pushView) {
Text("")
}.hidden()
.navigationBarTitle(self.pushView ? "New view" : "default view")
Text("See More")
.padding(.trailing)
.foregroundColor(Color.blue)
.onTapGesture {
self.pushView.toggle()
}
}
}
}
}
}
struct NewView: View {
var body: some View {
Text("New View")
}
}
ContentView picture
NewView picture
To tap on button and navigate to next screen,You can use NavigationLink like below
NavigationView{
NavigationLink(destination: SecondView()) {
Text("Login")
.padding(.all, 5)
.frame(minWidth: 0, maxWidth: .infinity,maxHeight: 45, alignment: .center)
.foregroundColor(Color.white)
}
}
You can use NavigationLink to implement this:
struct DetailsView: View {
var body: some View {
VStack {
Text("Hello world")
}
}
}
struct ContentView: View {
#State var selection: Int? = nil
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: DetailsView(), tag: 1, selection: $selection) {
Button("Press me") {
self.selection = 1
}
}
}
}
}
}