ios - SwiftUI 中两个嵌入式视图之间的过渡效果
问题描述
如果我有如下结构:
@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
?我可以动态定义下一个视图从哪一侧滑入吗?
解决方案
- 您需要将动画附加到传递给视图的绑定
- 您的视图需要有一个
@Binding
属性,当点击按钮时它们会发生变化 - 然后您可以将过渡附加到您的视图,如果您使用,您可以控制过渡的边缘
.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))
}
}
推荐阅读
- c++ - Visual Studio 2019 拒绝构建解决方案 C++
- javascript - 替换数据而不是向现有数据添加数据
- c# - 使用 if 语句检查布尔值
- python - 如何提取栅格中与另一个栅格中的像素重叠且地理位置略有不匹配的像素的平均值?
- r - 为向量的每个元素做我只为 R 中的一个元素做的事情
- c# - 在所有线程之间使用公共 SQL Server 连接并同时使用
- java - 如何使用 Spring Batch 跳过空行
- c - 两个相等大小的整数数组的函数和相加
- node.js - Express 网络服务器无响应
- arrays - 对数组中的每一行求和(Google 表格)