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

Question

亲爱的 SwiftUI 社区，

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

我发现这个有用的资源关于如何做到这一点。

但是，当我在自己的代码上尝试它时，它只适用于显示切换，而不适用于隐藏切换（在我的 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()
    }
}

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

Answer 2

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

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

结果：