SwiftUI - 从竖屏切换到横屏时的丑陋动画

Question

SwiftUI - 从竖屏切换到横屏时的丑陋动画

6

我有一个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旋转时，我有这个丑陋的动画：

我不喜欢从边缘旋转出现的视图。有没有办法让视图保持在原地，只更改颜色和文本？有什么方法可以改进它，创造出更美丽的东西吗？

- Duck

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asperi · Accepted Answer

这里可能有一个解决方案-只需更改使用的容器组合即可。

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