SwiftUI按钮与动画+过渡问题，当背景颜色在窗口答案

【问题标题】：SwiftUI button withAnimation + transition issue when background color in on the windowSwiftUI按钮与动画+过渡问题，当背景颜色在窗口
【发布时间】：2021-05-26 15:06:24
【问题描述】：

尊敬的 SwiftUI 社区，

我正在尝试创建一个文本字段，该字段通过单击按钮时的上移/下移动画来切换显示/隐藏。

我发现这对source 很有帮助。

但是，当我在自己的代码上尝试它时，它仅适用于显示切换而不适用于隐藏切换（在我的 iPhone 上运行时也是如此）。在完全剥离我的代码直到下面之后，我发现当我删除初始 ZStack 上的（背景）颜色时，这个问题得到了解决。

我不明白为什么会这样。这是一个 SwiftUI 错误还是这背后有什么逻辑？另外，我不知道现在如何在不弄乱文本字段动画的情况下向该窗口添加背景。

有人知道这方面的更多信息吗？

提前致谢！

最好，保罗

import SwiftUI

struct MatchResultsInput: View {
    
    @State private var show = false
    
    var body: some View {

        ZStack {
            Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1))
                .ignoresSafeArea()
            
            VStack {
                Button(action: {
                    withAnimation {
                        show.toggle()
                    }
                }) {
                    Text("Show/Hide button")
                        .foregroundColor(.white)
                        .bold()
                }
                .padding(5)
                .background(Color(#colorLiteral(red: 0.2117647059, green: 0.8, blue: 0.5176470588, alpha: 1)))
                .clipShape(Capsule())
                
                Spacer()
                
            }
            
            if show {
                
                VStack {
                    
                    Text("16")
                        .foregroundColor(.gray)
                        .font(.system(size: 30))
                        .bold()   
                }
                .transition(.move(edge: .bottom))                
            }
        }
    }
}

struct MatchResultsInput_Previews: PreviewProvider {
    static var previews: some View {
        MatchResultsInput()
    }
}

【问题讨论】：

标签： swiftui swiftui-animation

【解决方案1】：

我不认为这是一个错误。我可以通过添加zIndex 来修复它，如下所示。请尝试让我知道它是否也适合您。编码愉快！

struct MatchResultsInput: View {

    @State private var show = false
    var body: some View {
        ZStack {
            Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1))
                .ignoresSafeArea()
                .zIndex(0)
            ...
            if show {
                VStack {
                    ...
                }
                .transition(.move(edge: .bottom))
                .zIndex(1)
            }
        }
    }
}

【讨论】：

【解决方案2】：

因为您要在ZStack 中添加/删除视图，所以您需要设置zIndex。否则，SwiftUI 可能会立即重新排序堆栈，而您将无法获得过渡。

if show {
    VStack {
        Text("16")
            .foregroundColor(.gray)
            .font(.system(size: 30))
            .bold()
    }
    .transition(.move(edge: .bottom))
    .zIndex(2) /// here!
}

结果：

【讨论】：