I needed to add a view to my scene using a view transition. I was trying to use the modifier .transition(.opacity) but it just adds the view without any transition. I also tried the other transition types and they don't work. Since this is a really simple test project a don't see where's the issue. Here's a link to a video of my problem
import SwiftUI
struct Test: View {
#State var show = false
var body: some View {
VStack {
Button(action: {self.show.toggle()}) {
Text("Button")
}
if show {
Text("Test Text")
.transition(.move(edge: .top))
}
}
}
}
struct Test_Previews: PreviewProvider {
static var previews: some View {
Test()
}
}
You need to add animation for the transition
if show {
Text("Test Text").animation(.linear)
.transition(.move(edge: .top))
}
Related
I am trying to do programmatic navigation in NavigationView, but for some reason I am unable to switch between the views. When switching from the parent view everything works fine - but as soon as I am trying to switch while being in one of the child views I get this strange behaviour (screen is switching back and forth). I tried disabling animations, but this did not help. Strangely enough, if I remove a list together with .navigationViewStyle(StackNavigationViewStyle()) everything starts to work - but I need a list.
This seems to be somewhat similar to Deep programmatic SwiftUI NavigationView navigation but I do not have deep nesting and it still does not work.
I am using iOS 14.
struct TestView: View {
#State private var selection: String? = nil
var body: some View {
VStack {
NavigationView {
VStack {
List {
NavigationLink(destination: Text("View A"), tag: "A", selection: self.$selection) { Text("A") }
NavigationLink(destination: Text("View B"), tag: "B", selection: self.$selection) { Text("B") }
}
}
.navigationTitle("Navigation")
}
.navigationViewStyle(StackNavigationViewStyle())
Button("Tap to show A") {
selection = "A"
}.padding()
Button("Tap to show B") {
selection = "B"
}.padding()
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestView()
}
}
Here is the behaviour i get:
Navigation View/Link is meant to operate from parent to child directly, if you break that order then you should not use navigate via NavLink.
What you need to do is use a fullScreenCover which I think solves your problem nicely. Copy and paste the code to see what I mean.
import SwiftUI
struct TestNavView: View {
#State private var selection: String? = nil
#State private var isShowing = false
#Environment(\.presentationMode) var pMode
var body: some View {
VStack {
NavigationView {
VStack {
List {
NavigationLink(destination: Text("View A"), tag: "A", selection: self.$selection) { Text("A") }
NavigationLink(destination: Text("View B"), tag: "B", selection: self.$selection) { Text("B") }
}.fullScreenCover(isPresented: $isShowing, content: {
CView()
})
}
.navigationTitle("Navigation")
}
.navigationViewStyle(StackNavigationViewStyle())
Button("Tap to show A") {
selection = "A"
}.padding()
Button("Tap to show B") {
isShowing = true
selection = "B"
}.padding()
Button("Tap to show C") {
isShowing = true
}.padding()
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestNavView()
}
}
struct CView: View {
#Environment(\.presentationMode) var pMode
var body: some View {
VStack {
Button("Back") {self.pMode.wrappedValue.dismiss() }
Spacer()
Text("C")
Spacer()
}
}
}
If you are only wanting the presented view to take up half the screen, I would recommend using a ZStack to present the view over top of the main window.
You can add your own custom back button to the top left corner (or elsewhere).
This would allow both views to presented and switched between easily.
You can also add a withAnimation() to have the overlayed views to present nicely.
I'm trying to change my status bar color dynamically without success, anyone has any idea how to change it ?
I'm not using UIHosting controller so there is no AppDelegate or SceneDelegate fully using swiftUI:
#main
struct MyProjectApp: App{}
If i set ZStack {}.preferredColorScheme(.light) it only apply once, so if i go to another view and try to put ZStack {}.preferredColorScheme(.dark) it doesn't work.
I think i have try all the question here on stackoverflow, so if anyone have a definitive solution i appreciated.
#Updated code example
struct ContentA: View {
var body: some View {
NavigationView {
ZStack {
NavigationLink(destination: ContentB()) {
Text("Show Detail View")
}.navigationBarTitle("Navigation")
}.preferredColorScheme(.light)
}
}
}
struct ContentB: View {
var body: some View {
ZStack {
Text("Hello ContetB")
.padding()
.foregroundColor(.green)
}.preferredColorScheme(.dark)
}
}
If you try to change StatusBar color using this way it doesn't work.
The colors within the app should be dynamic automatically, unless you set them specifically. You can toggle the .preferredColorScheme within the Previews section.
struct ContentView: View {
var body: some View {
Text("Hello, world!")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.preferredColorScheme(.dark)
}
}
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 am writing an app using SwiftUI, and I am having some issues with the NavigationView and the Navigation Link, as shown below in the simulator video. The project was created as a Single View App.
I have three pages, and as you can see when it takes me from one page to the other, it builds the second page under the first one, and doesn’t dellocate the first one, and I have the same problem on the third page: it is created below the second one, and I can even go back to the first page via the faulty back button on the top left.
Video:
This is the code of the three pages:
first.swift
import SwiftUI
struct first: View {
var body: some View {
NavigationView{
NavigationLink(destination: second()) {
Text("first link")
}
}
}
}
struct first_Previews: PreviewProvider {
static var previews: some View {
first()
}
}
second.swift
import SwiftUI
struct second: View {
var body: some View {
NavigationView {
NavigationLink(destination: third()) {
Text("second link")
}
}
}
}
struct second_Previews: PreviewProvider {
static var previews: some View {
second()
}
}
third.swift
import SwiftUI
struct third: View {
var body: some View {
Text("Third page")
}
}
struct third_Previews: PreviewProvider {
static var previews: some View {
third()
}
}
I am using the Navigation View in the same manner that the official apple tutorial does (or at least I think I am…) here
Thanks!
Edit: I'm still having the same problem with this code, despite having defined only one NavigationView. The problem came back after I uploaded to Xcode 11.2, but in the Release Notes it doesn't say anything about any changes made to the NavigationView.
first.swift
import SwiftUI
struct first: View {
var body: some View {
NavigationView {
NavigationLink(destination: second()) {
Text("First link")
}
}
}
}
struct first_Previews: PreviewProvider {
static var previews: some View {
first()
}
}
second.swift
import SwiftUI
struct second: View {
var body: some View {
NavigationLink(destination: first()) {
Text("back to first")
}
}
}
struct second_Previews: PreviewProvider {
static var previews: some View {
second()
}
}
Video:
Thanks again!
What your current code is doing is nesting the NavigationView in second inside of the one in first.
To get around this you just need to delete the NavigationView in second:
struct second: View {
var body: some View {
NavigationLink(destination: third()) {
Text("second link")
}
}
}
I'm trying to do the simplest of things. I just want to summon a new SwiftUI view programmatically - not with a button, but with code. I've read a couple of dozens posts and Apple docs on this - but almost all that I've found relates to code that has been renamed or deprecated. The closest I have found is:
NavigationLink(destination: NewView(), isActive: $something) {
EmptyView()
}
But this does not work for me in Xcode Beta 7. Here's the trivial app:
struct ContentView: View {
#State private var show = false
var body: some View {
VStack {
Text("This is the ContentView")
Toggle(isOn: $show) {
Text("Toggle var show")
}
.padding()
Button(action: {
self.show = !self.show
}, label: {
Text(self.show ? "Off" : "On")
})
Text(String(show))
//this does not work - the ContentView is still shown
NavigationLink(destination: SecondView(), isActive: $show)
{
EmptyView()
}
//this does not work - it adds SecondView to ContentView
//I want a new view here, not an addition
//to the ContentView()
// if show {
// //I want a new view here, not an addition to the ContentView()
// SecondView()
// }
}
}
}
And the brutally simple destination:
struct SecondView: View {
var body: some View {
Text("this is the second view!")
}
}
I must be missing something extremely simple. Any guidance would be appreciated.
iOS 13.1, Catalina 19A546d, Xcode 11M392r
A couple of things. First, NavigationLink must be imbedded in a NavigationView to work. Second, the link doesn't need a view as you showed it. This should show the second view. I will leave to you to update the other elements.
var body: some View {
NavigationView{
VStack {
Text("This is the ContentView")
Toggle(isOn: $show) {
Text("Toggle var show")
}
.padding()
Button(action: {
self.show = !self.show
}, label: {
Text(self.show ? "Off" : "On")
})
Text(String(show))
//this does not work - the ContentView is still shown
NavigationLink(destination: SecondView()){
Text("Click to View")}
Spacer()
// {
// EmptyView()
// }
//this does not work - it adds SecondView to ContentView
//I want a new view here, not an addition
//to the ContentView()
// if show {
// //I want a new view here, not an addition to the ContentView()
// SecondView()
// }
}
}
}