Here is a split view:
If I click on the "Toggle", I'd like to see
And If I click Toggle again, show Left 1 - Right 1 again, and so on.
Here is my code:
struct ContentView2: View {
#State var toggle : String
var body: some View {
NavigationView {
if toggle == "first" {
LHSTest1()
RHSTest1()
}
else {
LHSTest2()
RHSTest2()
}
}
}
}
struct LHSTest1: View {
#State private var isActiveForLHS1 = false
var body: some View {
VStack {
Button("Toggle") {
self.isActiveForLHS1 = true
}
.padding()
Text("Left 1")
NavigationLink(destination: ContentView2(toggle: "second"), isActive: $isActiveForLHS1) { }.opacity(0)
}
}
}
struct RHSTest1: View {
var body: some View {
Text("Right 1")
}
}
struct LHSTest2: View {
#State private var isActiveForLHS2 = false
var body: some View {
VStack {
Button("Toggle") {
self.isActiveForLHS2 = true
}
Text("Left 2")
NavigationLink(destination: ContentView2(toggle: "first"), isActive: $isActiveForLHS2) { }.opacity(0)
}
}
}
struct RHSTest2: View {
var body: some View {
Text("Right 2")
}
}
Here is the problem: When I click toggle, a new layer of navigation view appears:
Any thoughts will be greatly appreciated.
Related
I am new to SwiftUI and have run into a little challenge. Whenever I go from my Home view to a sub-view and then back to the Home view, I am seeing extra space created in the Navigation view (see linked GIF). I was wondering if anyone had any advice - thanks in advance!
Here is the Home Screen:
struct Home: View {
#State private var view2 = false
var body: some View {
NavigationView {
VStack {
Text("Home View!")
.padding()
NavigationLink(destination: View2(), isActive: $view2) { }
Button {
self.view2 = true
} label: {
Text("Go to next view")
}
}
.navigationTitle("Home")
}
} }
Here is the sub-new (View2):
struct View2: View {
#State private var home = false
var body: some View {
VStack {
Text("This is View 2")
.padding()
NavigationLink(destination: Home().navigationBarBackButtonHidden(true), isActive: $home) { }
Button {
self.home = true
} label: {
Text("Go to Home view")
}
}
.navigationTitle("View 1")
} }
Link to GIF:
Visual GIF of the issue
Every time you push a new Home via a NavigationLink, you're adding another NavigationView to the hierarchy, since Home has a NavigationView in it.
To avoid that, you could separate the NavigationView out and instead link to View:
struct Home: View {
var body: some View {
NavigationView {
View1() //<-- Here
}
}
}
struct View1 : View {
#State private var view2 = false
var body: some View {
VStack {
Text("Home View!")
.padding()
NavigationLink(destination: View2(), isActive: $view2) { }
Button {
self.view2 = true
} label: {
Text("Go to next view")
}
}
.navigationTitle("Home")
}
}
struct View2: View {
#State private var home = false
var body: some View {
VStack {
Text("This is View 2")
.padding()
NavigationLink(destination: View1() //<-- Here
.navigationBarBackButtonHidden(true), isActive: $home) { }
Button {
self.home = true
} label: {
Text("Go to Home view")
}
}
.navigationTitle("View 2")
}
}
That being said, I'm a little skeptical of the strategy here. It seems like instead of pushing a new View1, you might just want to be going back to the existing one. In that case, your code could just look like this:
struct Home: View {
var body: some View {
NavigationView {
View1()
}
}
}
struct View1 : View {
#State private var view2 = false
var body: some View {
VStack {
Text("Home View!")
.padding()
NavigationLink(destination: View2(), isActive: $view2) { }
Button {
self.view2 = true
} label: {
Text("Go to next view")
}
}
.navigationTitle("Home")
}
}
struct View2: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
VStack {
Text("This is View 2")
.padding()
Button {
presentationMode.wrappedValue.dismiss()
} label: {
Text("Go to Home view")
}
}
.navigationTitle("View 2")
}
}
If the user clicks on connexionBtnView I want to redirect them to an AdminView or UserView
import SwiftUI
struct ConnexionView: View {
#State var loginId: String = ""
#State var pwd: String = ""
#StateObject private var keyboardHander = KeyBoardHandler()
var body: some View {
NavigationView{
ZStack{
Image("background")
.ignoresSafeArea()
VStack (spacing: 15){
Spacer()
logoView
Spacer()
titleView
loginIdView
loginPwdView
connexionBtnView
Spacer()
NavigationLink {
LostPwdView()
} label: {
lostPwd
}
Spacer()
}.frame(maxHeight: .infinity)
.padding(.bottom,keyboardHander.keyboardHeight)
.animation(.default)
}
}
}
The NavigationLink has the isActive parameter. You can pass it in the init of NavigationLink and when this state variable has the true value you will redirect to another view. Details here.
struct ConnexionView: View {
#State var isActive: Bool = false
var body: some View {
NavigationView {
VStack {
NavigationLink(isActive: $isActive) {
LostPwdView()
} label: {
Text("Some Label")
}
Button("Tap me!") {
isActive = true
}
}
}
}
}
struct LostPwdView: View {
var body: some View {
Text("Hello")
}
}
What you need to do is having a #State variable that would trigger the navigation:
.fullScreenCover(
isPresented: $viewShown
) {
print("View dismissed")
} content: {
NextView()
}
Where NextView() is the View you want to show and the viewShown is your State variable, below a full example:
struct ExampleView: View {
#State var isNextPageOpen = false
var body: some View {
Button("Tap Here To Navigate") {
isNextPageOpen = true
}
.fullScreenCover(
isPresented: $isNextPageOpen
) {
print("View dismissed")
} content: {
NextView()
}
}
}
I've a SwiftUI ForEach loop which contains views that expand when clicked. Something similar to the view shown below.
struct ExpandingView: View {
#State var isExpanded = false
var body: some View {
VStack {
Text("Hello!")
if isExpanded {
Text("World")
}
}
.onTapGesture {
withAnimation {
isExpanded.toggle()
}
}
}
}
In theory, I can use the ScrollViewReader and scrollTo a particular position.
ScrollViewReader { view in
ScrollView {
ForEach(0...100, id: \.self) { id in
ExpandingView()
.id(id)
.padding()
}
}
}
However, in practice, I'm not sure how to get the id from within the view (because onTapGesture is in the view) and propagate it up one level.
The other option is to have the onTapGesture in the ForEach loop, but then I'm not sure how to toggle the isExpanded flag for the correct view.
You can pass a ScrollViewProxy to row view and then you can now able to scroll.
struct ExpandingView: View {
#State var isExpanded = false
var id: Int
var proxy: ScrollViewProxy
var body: some View {
VStack {
Text("Hello!")
if isExpanded {
Text("World")
}
}
.onTapGesture {
withAnimation {
isExpanded.toggle()
proxy.scrollTo(id, anchor: .center)
}
}
}
}
struct TestScrollView: View {
var body: some View {
ScrollViewReader { view in
ScrollView {
ForEach(0...100, id: \.self) { id in
ExpandingView(id: id, proxy: view)
.id(id)
.padding()
}
}
}
}
}
if I understand your question correctly, you are asking how to pass the id in "ContentView ScrollView"
into ExpandingView. Try this:
import SwiftUI
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct ExpandingView: View {
#State var worldId: Int
#State var isExpanded = false
var body: some View {
VStack {
Text("Hello!")
if isExpanded { Text("World \(worldId)") }
}.onTapGesture {
withAnimation { isExpanded.toggle() }
}
}
}
struct ContentView: View {
var body: some View {
ScrollViewReader { view in
ScrollView {
ForEach(0...100, id: \.self) { id in
ExpandingView(worldId: id).id(id).padding()
}
}
}
}
}
I've created a simple view acting as a navbar which contains a menu button and some text. I'm using this as a top-level element outside my NavigationView which allows me to have the view static across all child pages that come into view. The reason I'm trying not to use the default navbar, with navbar items, is to avoid the dismissal/creation that you get along with the fading animation when you switch views.
The problem I'm now facing is dismissing the child view's when I have navigated away from the parent view. I'm able to update the button from a menu icon to a back icon, but the action of the button is not triggered. Been looking online to see if anyone has done something similar but had no luck, I'm not sure what I'm trying to achieve is even possible or whether I am going about it the right way. Is there anyway to call self.presentationMode.wrappedValue.dismiss() from the child views even though the header is initialised in the root view? Any help is appreciated, here's what I have so far:
Root View (View1):
struct View1: View {
#State var showMenuButton: Bool = false
var body: some View {
VStack {
CustomNavigationView(showMenuButton: self.showMenuButton)
NavigationView {
NavigationLink(destination: View2()) {
Text("View 2")
}
.navigationBarTitle("")
.navigationBarHidden(true)
.onDisappear(){
self.showMenuButton = false
}
.onAppear() {
self.showMenuButton = true
}
}
}
}
}
Child View of root view (View2):
struct View2: View {
var body: some View {
VStack{
Text("This is View 2")
.navigationBarTitle("")
.navigationBarHidden(true)
NavigationLink(destination: View3()) {
Text("View 3")
}
}
}
}
Child view of view 2 (View3):
struct View3: View {
var body: some View {
VStack{
Text("This is View 3")
.navigationBarTitle("")
.navigationBarHidden(true)
}
}
}
Custom Navigation View:
struct CustomNavigationView: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var showMenuButton = false
var body: some View {
VStack {
HStack {
if showMenuButton {
Button(action: {
//Do Something
}) {
Image(systemName: "line.horizontal.3")
.foregroundColor(.black)
}
} else {
Button(action: { self.presentationMode.wrappedValue.dismiss()}) {
Image(systemName: "arrow.left")
.foregroundColor(.black)
}
}
Text("Sometext")
}
}
}
}
The environment object 'presentationMode' that you used inside the first view cannot dismiss the views you pushed. Every view that wants to be dismissed must have their own objects. The object inside the first view does not belong to any other pushed views. So, you need to create view model to manage this task.
Here is the example code. Hope that will help you solve your problem.
class NavigationObserver: ObservableObject {
private var views: [Int:Binding<PresentationMode>] = [:]
private var current: Int = 0
func popView() {
guard let view = views[current] else {
return
}
view.wrappedValue.dismiss()
views[current] = nil
current -= 1
}
func pushView(id: Int, newView: Binding<PresentationMode>) {
guard views[id] == nil else {
return
}
current += 1
views[id] = newView
}
}
struct ContentView: View {
#State var showMenuButton: Bool = false
#ObservedObject var observer = NavigationObserver()
var body: some View {
VStack {
CustomNavigationView(observer: self.observer, showMenuButton: self.showMenuButton)
NavigationView {
NavigationLink(destination: View2(observer: self.observer)) {
Text("View 2")
}
.navigationBarTitle("")
.navigationBarHidden(true)
.onDisappear(){
self.showMenuButton = false
}
.onAppear() {
self.showMenuButton = true
}
}
}
}}
struct View2: View {
#Environment(\.presentationMode) var presentationMode
#ObservedObject var observer: NavigationObserver
var body: some View {
VStack{
Text("This is View 2")
.navigationBarTitle("")
.navigationBarHidden(true)
NavigationLink(destination: View3(observer: self.observer)) {
Text("View 3")
}
}.onAppear {
self.observer.pushView(id: 1, newView: self.presentationMode)
}
}}
struct View3: View {
#Environment(\.presentationMode) var presentationMode
#ObservedObject var observer: NavigationObserver
var body: some View {
VStack{
Text("This is View 3")
.navigationBarTitle("")
.navigationBarHidden(true)
}.onAppear
{
self.observer.pushView(id: 2, newView: self.presentationMode)
}
}
}
struct CustomNavigationView: View {
#ObservedObject var observer: NavigationObserver
var showMenuButton = false
var body: some View {
VStack {
HStack {
if showMenuButton {
Button(action: {
//Do Something
}) {
Image(systemName: "line.horizontal.3")
.foregroundColor(.black)
}
} else {
Button(action: {
self.observer.popView()
}) {
Image(systemName: "arrow.left")
.foregroundColor(.black)
}
}
Text("Sometext")
}
}
}
}
Thanks, X_X
So I want to present a new view using SwiftUI, without the user having to tap a button, since NavigationButton would work with that. Here is an example
struct ContentView : View {
var model: Model
var body: some View {
NavigationView {
Text("Hello World")
}.onAppear {
if model.shouldPresent {
// present a new view
}
}
}
}
In the onAppear I want to include some code that will push a new view onto the navigation stack.
Here's a way to present view as a Modal.
struct PresentOnloadView: View {
var body: some View {
HStack {
Text("Hey there")
}
.presentation(Modal(HelloView(), onDismiss: nil))
}
}
struct HelloView: View {
var body: some View {
Text("Whats up! 👻")
}
}
Similarly, if you're looking to control whether to present or not using a variable, you can do something like this..
struct PresentOnloadControlledView : View {
#State var sayHello = false
var body: some View {
HStack {
Text("What's up!")
}
.onAppear(perform: {
// Decide whether to show another view or not here
self.sayHello = true
})
.presentation(sayHello ? Modal(HelloView()) : nil)
}
}
As of Version 11.0 beta 4 ➝ .presentation and Modal has been deprecated.
Not to worry! .sheet saves the day!
struct PresentOnloadControlledView : View {
#State var sayHello = false
var body: some View {
HStack {
Text("What's up!")
}
.onAppear(perform: {
// Decide whether to show another view or not here
self.sayHello = true
})
.sheet(isPresented: $sayHello) {
HelloView()
}
}
}
SwiftUI 2
Segue equivalents in SwiftUI 2 / iOS 14:
Show (Push)
struct ContentView: View {
#State var showSecondView = false
var body: some View {
NavigationView {
Text("First view")
.background(NavigationLink("", destination: Text("Second view"), isActive: $showSecondView))
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
showSecondView = true
}
}
}
}
Show Detail (Replace)
struct ContentView: View {
#State private var showSecondView = false
var body: some View {
NavigationView {
if showSecondView {
Text("Second view")
} else {
Text("First view")
}
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
showSecondView = true
}
}
}
}
Present Modally
struct ContentView: View {
#State private var showSecondView = false
var body: some View {
NavigationView {
Text("First view")
}
.sheet(isPresented: $showSecondView) {
Text("Second view")
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
showSecondView = true
}
}
}
}
Present as Full Screen
struct ContentView: View {
#State private var showSecondView = false
var body: some View {
NavigationView {
Text("First view")
}
.fullScreenCover(isPresented: $showSecondView) {
Text("Second view")
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
showSecondView = true
}
}
}
}
Note: I added DispatchQueue.main.asyncAfter(deadline: .now() + 1) so you can see the transition. You can remove it and the transition will start immediately.
Inside your view:
#State var present = true
var body: some View {
NavigationLink(destination: DestinationView(), isActive: $present) {
EmptyView()
}
}
This code presents DestinationView as soon as the NavigationLink loads. The crucial part is the isActive parameter, which programmatically triggers the transition to the other View.
You could rewrite as follows
#State var present = false
var body: some View {
NavigationLink(destination: DestinationView(), isActive: $present) {
Button {
present = true
} label: { Text("Present") }
}
}
To manually create a navigation button.
You can simply put the logic inside the NavigationView. Like this:
#State var x = true;
var body : some View {
NavigationView {
if x {
Text("Hello")
Button(action: {
self.x = false;
}, label: { Text("Click Me") })
} else {
Text("World")
}
}
}