ZStack块动画SwiftUI

Question

因此，我的目标是能够不时地在SwiftUI表视图上显示自定义视图，所以我想我应该把它们都放在这样的ZStack中

@State var show = true
@State private var selectedTab      : Int = 0

var body: some View {
    ZStack {
        TabView(selection: $selectedTab) {
            Color.pink
        }
        
        if show {
            Button(action: {
                withAnimation(Animation.linear(duration: 10)) {
                    show = false
                }
            }) {
                Color.blue
            }
            .frame(width: 100, height: 100)
        }
    }
}

这很好，但是当我尝试使用withAnimation()时，不会触发任何动画。我如何使叠加视图，消失与动画？

Answer 1

所以我找到了一个解决方案，我认为这是原因所在。我的假设是，如果动画修饰符没有显式设置，它就不会处理ZIndex。

一种解决方案是将ZIndex设置为顶部应该高于另一个视图的视图。如下所示：

@State var show = true
@State private var selectedTab      : Int = 0

var body: some View {
    ZStack {
        TabView(selection: $selectedTab) {
            Color.pink
        }
        
        if show {
            Button(action: {
                withAnimation {
                    show = false
                }
            }) {
                Color.blue
            }
            .frame(width: 100, height: 100)
            .zIndex(.infinity)  // <-- this here makes the animation work
        }
    }
}

Answer 2

在容器中使用.animation修饰符，如下所示，因此容器可以动态删除视图

ZStack {
    TabView(selection: $selectedTab) {
        Color.pink
    }
    
    if show {
        Button(action: {
           show = false   // << withAnimation not needed anymore
        }) {
            Color.blue
        }
        .frame(width: 100, height: 100)
    }
}
.animation(Animation.linear(duration: 10), value: show)   // << here !!