ZStack blocks animation SwiftUI-CodePudding

So my goal is to be able to show a custom view from time to time over a SwiftUI tabview, so I thought I would place them both in a ZStack like this

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

This works just fine, but when I try to use withAnimation() no animation gets triggered. How can I make the overlaying view, disappear with animation?

CodePudding user response：

Use .animation modifier with container, like below, so container could animate removing view

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 !!

CodePudding user response：

So I found a solution and what I think is the cause of this. My hypothesis is that the animation modifier does not handle ZIndex IF it is not explicitly set.

One solution to this is to set ZIndex to the view that should be on the top to something higher than the other view. Like this:

@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
        }
    }
}