如何為切換視圖設置動畫，使其向下而不是向上滑動？

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()
    }
}