如何根據條件對 SwiftUI 中的視圖應用不同類型的過渡

Question

在我當前的項目中，我將轉換應用於我的身份驗證視圖。 但是，在登錄時，我希望出現不同的過渡。 （與用戶簡單地單擊“返回”按鈕不同）

這是我制作的基本模型的一些代碼：

授權視圖：

struct AuthView: View {
    
    @EnvironmentObject var testModel: TestModel //Not used yet, used later

    @State private var showSignIn: Bool = false
    @State private var showSignUp: Bool = false
    
    var body: some View {
        if (!showSignIn && !showSignUp) {
            WelcomeView(showSignIn: $showSignIn, showSignUp: $showSignUp)
                .transition(AnyTransition.asymmetric(insertion: AnyTransition.move(edge: .leading), removal: AnyTransition.move(edge: .leading)))
        } else if showSignIn {
            SignInView(showSignIn: $showSignIn)
                .transition(AnyTransition.move(edge: .trailing))
        } else {
            SignUpView(showSignUp: $showSignUp)
                .transition(AnyTransition.move(edge: .trailing))
        }
    }
}

歡迎查看代碼：

struct WelcomeView: View {
    
    @Binding var showSignIn: Bool
    @Binding var showSignUp: Bool
    
    var body: some View {
        VStack {
            
            Text("Welcome!")
                
            Button(action: { withAnimation { showSignIn.toggle() } }) {
                Text("Sign In")
                    .underline()
                    .foregroundColor(.white)
            }
            
            Button(action: { withAnimation { showSignUp.toggle() } }) {
                Text("Sign Up")
                    .underline()
                    .foregroundColor(.white)
            }
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.blue.ignoresSafeArea())
    }
}

登錄視圖：

struct SignInView: View {
    
    @EnvironmentObject var testModel: TestModel
    
    @Binding var showSignIn: Bool
    
    var body: some View {
        VStack {
            
            Text("Sign In")
                
            Button(action: { withAnimation { showSignIn.toggle() } }) {
                Text("Go back")
                    .underline()
                    .foregroundColor(.white)
            }
            
            Button(action: { withAnimation { testModel.signedIn.toggle() } }) {
                Text("Complete Sign In")
                    .underline()
                    .foregroundColor(.white)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.green.ignoresSafeArea())
    }
}

內容視圖：

struct ContentView: View {
    
    @StateObject var testModel = TestModel()
    
    var body: some View {
        
        if testModel.signedIn {
            
            Text("Home page")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.green)
                .transition(AnyTransition.opacity)
                .onTapGesture {
                    testModel.signedIn.toggle()
                }
            
        } else {
            
            AuthView()
                .environmentObject(testModel)
            
        }
    }
}

它是什么：

我想要的是：

當我“完成”登錄過程時，我正在嘗試應用不同的過渡效果。 在我的模型中，我通過單擊“完成登錄”來模擬這個

我嘗試將我的 SignInView 代碼（在我的 AuthView 中）更改為此，將三元運算符應用於轉換：

SignInView(showSignIn: $showSignIn)
                .transition(AnyTransition.move(edge: (testModel.signedIn ? .bottom : .trailing)))

但它沒有任何效果。

提前感謝您的幫助！

Answer 1

我解決了我自己的問題！

我創建了一個新的 @State 變量，類型為AnyTransition ，使用該變量代替我的三元運算符。 然后，當我運行登錄 function 時，我使用邏輯來更改轉換類型（@State 變量）。