[英]How to apply a different type of transition to a view in SwiftUI, depending on a conditional
在我当前的项目中,我将转换应用于我的身份验证视图。 但是,在登录时,我希望出现不同的过渡。 (与用户简单地单击“返回”按钮不同)
这是我制作的基本模型的一些代码:
授权视图:
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)))
但它没有任何效果。
提前感谢您的帮助!
我解决了我自己的问题!
我创建了一个新的 @State 变量,类型为AnyTransition
,使用该变量代替我的三元运算符。 然后,当我运行登录 function 时,我使用逻辑来更改转换类型(@State 变量)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.