SwiftUI中两个嵌入视图之间的过渡效果

Question

If I have a structure like the following:

@State var currentView = "first"

VStack {
    if (state == "first") {
        View1()
    } else if (state == "second") {
        View2()
    } else {
        View3()
    }
}

And a View1:

@Published var currentView: String

Button("to second") {
    currentView = "second"
}

How can I make sure that View2 slides from the left while replacing View1 ? Can I dynamically define which side the next view slides in from?

Answer 1

1. You need to attach an animation to the binding that you pass to your views
2. Your views will need to have an @Binding property that they will mutate when the button is tapped
3. Then you can attach a transition to your views, you can control the edge of the transition if you use .move (define which side the view slides in from)

I made your views take the whole screen and have a color, so that the transition is more obvious. I also added a duration to each transition, you can modify it or remove it.

import SwiftUI

struct ContentView: View {
    @State var currentView = "first"

    var body: some View {
        VStack {
            if (currentView == "first") {
                View1(currentView: $currentView.animation())
            } else if (currentView == "second") {
                View2(currentView: $currentView.animation())
            } else {
                View3(currentView: $currentView.animation())
            }
        }
    }

}

struct View1: View {

    @Binding var currentView: String

    var body: some View {
        ZStack {
            Rectangle().fill(Color.red)
            VStack {
                Text("View1")
                Button("to second") {
                    self.currentView = "second"
                }
            }

        }
        .transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)))
        .animation(.linear(duration: 2))

    }
}

struct View2: View {
    @Binding var currentView: String

    var body: some View {
        ZStack {
            Rectangle().fill(Color.yellow)
            VStack {
                Text("View2")
                Button("to third") {
                    self.currentView = "third"
                }
            }

        }
        .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading)))
        .animation(.linear(duration: 2))

    }
}

struct View3: View {

    @Binding var currentView: String

    var body: some View {
        ZStack {
            Rectangle().fill(Color.pink)
            VStack {
                Text("View3")
                Button("to first") {
                    self.currentView = "first"
                }
            }

        }
        .transition(.asymmetric(insertion: .move(edge: .bottom), removal: .move(edge: .top)))
        .animation(.linear(duration: 2))
    }
}