动画过渡时视图背景颜色为白色

Question

我有一个

ZStack

，背景颜色设置为橙色，它忽略了安全区域。它将导航到的所有后续视图或先前视图也将具有非白色的颜色。

除父视图外，每个单独的视图都嵌入到导航视图中

ZStack

。过渡时，使用

.easeInOut

动画，背景显示白色，当前视图正在缩小。如何设置该视图的颜色或摆脱其下方的白屏？

ZStack{
    ColorFunctionIgnoreEdges()
    switch self.VM.ABC {
        case .A:
            NavigationView{
                A(A: self.VM).animation(.default)
            }
        case .B:
            NavigationView{
                B(B: self.VM).animation(.none)
            }
        case .C:
            NavigationView{
                CView(C: self.VM).animation(.none)
            }
        case .initlizing:
            VStack{
                Text("One sec...")
                ProgressView()
            }
    }
}

Answer 1

今天早上我自己遇到了这个问题，经过几次随机尝试后，我有了一个可行的解决方案。我是 SwiftUI 的新手，所以不确定这是否是最佳的，但与您类似，我的 if/else 位于

body

属性的根中，并且底层主体是白色视图。

我所做的是建立一个顶级 VStack，并在其下嵌套 if/else。顶层 VStack 能够设置其背景颜色，这是视图转换期间看到的底层颜色。

请参阅演示代码以获取示例。

import SwiftUI

struct Test: View {
    @State private var goToNextScreen: Bool = false

    var body: some View {
        // outer container View in order to set the underlying color to something other than white
        VStack {
            if goToNextScreen {
                OtherView()
                    .transition(.slide)
            } else {
                VStack(alignment: .leading, spacing: 0)  {
                    Button("Next", action: {
                        withAnimation {
                            self.goToNextScreen.toggle()
                        }
                    })
                }
                .frame(minWidth: 0, idealWidth: .infinity, maxWidth: .infinity, minHeight: 0, idealHeight: .infinity, maxHeight: .infinity, alignment: .topLeading)
                .padding(.horizontal, 16)
                .background(Color.orange)
            }
        }
        .frame(minWidth: 0, idealWidth: .infinity, maxWidth: .infinity, minHeight: 0, idealHeight: .infinity, maxHeight: .infinity, alignment: .center)
        .background(.black) // This is the color that will be seen during a View transition rather than the white
    }
}

struct OtherView: View {
    var body: some View {
        VStack {
            Text("Other view")
        }
        .frame(minWidth: 0, idealWidth: .infinity, maxWidth: .infinity, minHeight: 0, idealHeight: .infinity, maxHeight: .infinity, alignment: .center)
        .background(.orange)
    }
}

#Preview {
    Test()
}