SwiftUI - 从纵向切换到横向的丑陋动画

Question

我有一个适用于 iPhone 的应用程序，我想要两种视图，一种是纵向视图，一种是横向视图。所以我在 ContentView 上有这个：

struct ContentView: View {
    var body: some View {          
      Group {
        GeometryReader { geometry in
          if (geometry.size.width > geometry.size.height) {
            ZStack {
              Color.red
                .edgesIgnoringSafeArea(.all)
              
              Text("LANDSCAPE")
                .font(.title)
                .foregroundColor(.white)
            }
          }
          
          if (geometry.size.width < geometry.size.height) {
            
            ZStack {
              Color.blue
                .edgesIgnoringSafeArea(.all)
              
              Text("PORTRAIT")
                .font(.title)
                .foregroundColor(.white)
            }
          }
        }
      }
      .background(Color.black.edgesIgnoringSafeArea(.all))
    }
}

当 iPhone 旋转时，我会看到这个丑陋的动画：

我不喜欢从边缘看到的旋转的景色。有什么方法可以使视图就位并且仅更改颜色和文本吗？

有什么方法可以改善这一点并创造出更美丽的东西吗？

Answer 1

这是可能的解决方案 - 只需更改使用过的容器的组合。

使用 Xcode 12.1 / iOS 14.1 进行测试

struct ContentView: View {
    var body: some View {
        GeometryReader { gp in
            ZStack {
                LANDSCAPEView().opacity(gp.size.width > gp.size.height ? 1.0 : 0)
                PORTRAITView().opacity(gp.size.width < gp.size.height ? 1.0 : 0)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .animation(.default)
        .background(Color.black.edgesIgnoringSafeArea(.all))
    }
}

struct LANDSCAPEView: View {
    var body: some View {
        Color.red
            .overlay(
                
                Text("LANDSCAPE")
                    .font(.title)
                    .foregroundColor(.white)
            )
            .edgesIgnoringSafeArea(.all)
    }
}

struct PORTRAITView: View {
    var body: some View {
        Color.blue.overlay(
            
            Text("PORTRAIT")
                .font(.title)
                .foregroundColor(.white)
        )
        .edgesIgnoringSafeArea(.all)
    }
}