如何为切换视图设置动画，使其向下而不是向上滑动？

Question

我有以下伪代码：

VStack {
  Image1.gesture(
    TapGesture().onEnd({showDetails.toggle()})
  )
  if showDetails:
    Text
  Image2
}

GIF： https://www.loom.com/share/faff28b4a2764fa2a61d826a12a3e0b6

当我点击 Image1 时，详细信息将在下面展开。

我想让这个过渡更加平滑，让它滑动而不是突然出现。

所以我试图改变

  Image1.gesture(
    TapGesture().onEnd({showDetails.toggle()})
  )

至

  Image1.gesture(
    TapGesture().onEnd({withAnimation{showDetails.toggle()}})
  )

GIF： https://www.loom.com/share/09c0544108174bf3ac5ef518d2c7d21c

但是，这会导致 Image1 向上移动，这不是我想要的。 我希望 Image2 向下移动。

有没有人有什么建议？

Answer 1

看一下这个：

我只是用 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()
    }
}