SwiftUI，动画过渡时视图背景色为白色？

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(.brown) // This is the color that will be seen during a View transition rather than the white
    }
}

#Preview {
    Test()
}