带有卡叠的SwiftUI水平过渡

Question

我有一堆纸牌，我正在尝试进行水平过渡。新卡的动画应从左侧完全滑入。消失的卡应向右滑出。

import SwiftUI

struct ContentView: View {
    @State var currentIndex = 0

    var body: some View {
        VStack{
            Button("Next"){
                withAnimation(.easeIn(duration: 2.0)){
                    self.currentIndex += 1
                }
            }

            ZStack{
                ForEach(0...100, id:\.self){i in
                    ZStack{
                        if self.currentIndex == i{
                            Card(text: String(i))
                                .transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)))
                        }
                    }
                }
            }
        }
    }
}

struct Card: View{
    var text:String
    var body: some View{
        Text(text)
            .frame(minWidth:0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .background(Color.yellow)
            .border(Color.purple, width: 5)

    }
}

Answer 1

用对齐方式ZStack和.top包裹两个.leading为我解决了这个问题：

import SwiftUI

struct ContentView: View {
    @State var currentIndex = 0

    var body: some View {
        VStack{
            Button("Next"){
                withAnimation(.easeIn(duration: 3.0)){
                    self.currentIndex += 1
                }
            }

            ZStack(alignment:.leading){
                ZStack(alignment:.top){
                    ForEach(0...100, id:\.self){i in
                        ZStack(){
                            if self.currentIndex == i{
                                Card(text: String(i))
                                    .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading)))
                            }
                        }
                    }
                }
            }
        }
    }
}

struct Card: View{
    var text:String
    var body: some View{
        Text(text)
            .frame(minWidth:0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .background(Color.yellow)
            .border(Color.purple, width: 5)

    }
}