[英]How can I animate a toggled view so that it slides downwards, and not upwards?
I have the following pseudocode:我有以下伪代码:
VStack {
Image1.gesture(
TapGesture().onEnd({showDetails.toggle()})
)
if showDetails:
Text
Image2
}
GIF: https://www.loom.com/share/faff28b4a2764fa2a61d826a12a3e0b6 GIF: https://www.loom.com/share/faff28b4a2764fa2a61d826a12a3e0b6
When I tap Image1, the details expand below.当我点击 Image1 时,详细信息将在下面展开。
I wanted to make this transition more smooth, by having it slide instead of suddenly appear.我想让这个过渡更加平滑,让它滑动而不是突然出现。
So I tried to change所以我试图改变
Image1.gesture(
TapGesture().onEnd({showDetails.toggle()})
)
to至
Image1.gesture(
TapGesture().onEnd({withAnimation{showDetails.toggle()}})
)
GIF: https://www.loom.com/share/09c0544108174bf3ac5ef518d2c7d21c GIF: https://www.loom.com/share/09c0544108174bf3ac5ef518d2c7d21c
However, this causes the Image1 to move upwards, which is not what I want.但是,这会导致 Image1 向上移动,这不是我想要的。 I want Image2 to move downwards.
我希望 Image2 向下移动。
Does anyone have any suggestions?有没有人有什么建议?
check this out:看一下这个:
i just put the explanation under the image with zstack and move it down on toggle.我只是用 zstack 将解释放在图像下,然后在切换时将其向下移动。
struct ContentView: View {
@State var showDetails = false
var body: some View {
VStack {
ZStack {
Text("explanation")
.offset(y: showDetails ? 200 : 0)
Image(systemName: "circle")
.resizable()
.frame(width:300,height: 300)
.background(Color.red)
.onTapGesture {
withAnimation{
self.showDetails.toggle()
}
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.