SwiftUI中兩個嵌入視圖之間的過渡效果

Question

如果我有如下結構：

@State var currentView = "first"

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

還有一個 View1：

@Published var currentView: String

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

如何確保View2在替換View1時從左側滑動？ 我可以動態定義下一個視圖從哪一側滑入嗎？

Answer 1

1. 您需要將 animation 附加到您傳遞給視圖的綁定
2. 您的視圖需要有一個@Binding屬性，當點擊按鈕時它們會發生變化
3. 然后您可以將過渡附加到您的視圖，如果您使用.move可以控制過渡的邊緣（定義視圖從哪一側滑入）

我讓你的視圖占據了整個屏幕並有顏色，這樣過渡更明顯。 我還為每個過渡添加了持續時間，您可以修改或刪除它。

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))
    }
}