ios - 将函数参数传递给 subview 时动画不起作用

Question

我有一个可以显示两个 View 之一的父 View :

struct LoginSubView: View {
    @State private var loginSubView: LoginSubViews = .login
    
    func setLoginSubView(_ view: LoginSubViews) {
        withAnimation {
            self.loginSubView = view
        }
    }
    
    var body: some View {
        VStack {
            if self.loginSubView == .signup {
                SignupView(setLoginSubView: self.setLoginSubView)
                    .transition(AnyTransition.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading)).animation(.default))
            } else {
                LoginView(setLoginSubView: self.setLoginSubView)
                    .transition(AnyTransition.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)).animation(.default))
            }
        }
        .padding(.horizontal, 16)
        .keyboardObserving()
    }
}

这些 subview 调用 setLoginSubView() 来切换 View 。

不幸的是，当我传递函数并从 child 调用它时，它不再有动画。它立即切换。但是，如果我这样做，它确实有效:

struct LoginSubView: View {
    @State private var loginSubView: LoginSubViews = .login
    
    // removed setLoginSubview()
    
    var body: some View {
        VStack {
            if self.loginSubView == .signup {
                SignupView(setLoginSubView: self.setLoginSubView)
                    .transition(AnyTransition.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading)).animation(.default))
                
                // Added it here
                Button(action: {
                    withAnimation {
                        self.loginSubView = .login
                    }
                }) {
                    Text("Already have an account? Sign in").animation(nil)
                }
            } else {
                LoginView(setLoginSubView: self.setLoginSubView)
                    .transition(AnyTransition.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)).animation(.default))
                // And added this here
                Button(action: {
                    withAnimation {
                        self.loginSubView = .signup
                    }
                }) {
                    Text("Don't have an account? Sign up").animation(nil)
                }
            }
        }
        .padding(.horizontal, 16)
        .keyboardObserving()
    }
}

将此函数传递给 child 时如何让动画工作？

Answer 1

将动画移动到容器(使用 Xcode 12/iOS 14 测试)

var body: some View {
    VStack {
        if self.loginSubView == .signup {
            SignupView(setLoginSubView: self.setLoginSubView)
                .transition(AnyTransition.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading)))
        } else {
            LoginView(setLoginSubView: self.setLoginSubView)
                .transition(AnyTransition.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)))
        }
    }
    .animation(.default)          // << here !!
    .padding(.horizontal, 16)
    .keyboardObserving()
}