[英]SwiftUI conditional view will not animate/transition
I'm trying to get my views to animate/transition using .transition()
on views.我正在尝试使用.transition()
对视图进行动画/转换。 I use similar code from here and put .transition()
to both conditional views.我使用这里的类似代码并将.transition()
放在两个条件视图中。
struct Base: View {
@State private var isSignedIn = false
var body: some View {
Group {
if(isSignedIn){
Home().transition(.slide)
}else{
AuthSignin(isSignedIn: self.$isSignedIn).transition(.slide)
}
}
}
}
struct AuthSignin: View {
@Binding var isSignedIn: Bool
var body: some View {
VStack {
Button(action: {
self.isSignedIn = true
}) {
Text("Sign In")
.bold()
.frame(minWidth: CGFloat(0), maxWidth: .infinity)
.padding()
.background(Color.blue)
.foregroundColor(Color.white)
.cornerRadius(CGFloat(10))
}.padding()
}
}
}
However, whenever I click on the "Sign In" button (with or without .transition()
), the app will freeze for a second and then the Home()
view will suddenly appear without any animation/transition.然而,每当我点击“登录”按钮(有或没有.transition()
)时,应用程序都会冻结一秒钟,然后Home()
视图会突然出现而没有任何动画/过渡。 I've also tried to wrap self.isSignedIn = true
in withAnimation
but it still won't work.我也尝试将self.isSignedIn = true
包装在withAnimation
但它仍然无法正常工作。 Any ideas or is there a better way to do this?任何想法或有更好的方法来做到这一点?
Place your .transition
on the container of the views that will switch , not each conditional view.将您的.transition
放在将切换的视图的容器上,而不是每个条件视图上。 Here's a trivial example from some code I have done (which works).这是我完成的一些代码中的一个简单示例(有效)。
In the main View that needs to transition conditionally:在需要有条件转换的主视图中:
import SwiftUI
struct AppWrapperView: View {
@State var showFirstRun:Bool = true
var body: some View {
ZStack {
if (showFirstRun) {
FirstRunView(showFirstRun: $showFirstRun)
} else {
Text("Some other view")
}
}
.transition(.slide)
}
}
Then, somewhere in the view that triggers the change in condition:然后,在触发条件变化的视图中的某处:
import SwiftUI
struct FirstRunView: View {
@Binding var showFirstRun:Bool
var body: some View {
Button(action: {
withAnimation {
self.showFirstRun = false
}
}) {
Text("Done")
}
}
}
I had to put my if..else
statement inside ZStack
container instead of Group
.我不得不将if..else
语句放在ZStack
容器而不是Group
。 Seems that Group
was the main reason for broken animation in my case.在我的案例中,似乎Group
是动画损坏的主要原因。 Also, I applied .transition
in combination with .animation
to container instead of views.另外,我施加.transition
结合.animation
到容器,而不是视图。
ZStack {
if(isSignedIn){
Home()
} else {
AuthSignin(isSignedIn: self.$isSignedIn)
}
}
.transition(.slide)
.animation(.easeInOut)
将 WithAnimation 放在 self.isSignedIn = true 之前
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.