旋转视图 SwiftUI iOS 14

Question

我想旋转我的视图，以便它改变它的框架并在旋转时覆盖整个屏幕。 我已经尝试了所有类型的旋转以及不同的锚点。 这在 iOS 13 中工作得很好，但在 iOS 14 中，视图和边距之间存在奇怪的差距。

常规视图

进入全屏时

struct ContentView: View {
    
    @State private var isFullScreen = false
    
    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                ZStack(alignment: .center) {

                    VStack(spacing: 0) {
                            HStack(alignment: .top)
                            {
                                Spacer(minLength: 0)
                                ZStack(alignment: Alignment(horizontal: .trailing, vertical: .center)) {
                                    RoundedRectangle(cornerRadius: 0)
                                        .foregroundColor(Color.yellow)
                                        
                                    
                                    VStack {
                                        Button(action: {
                                            self.isFullScreen.toggle()
                                        }, label: {
                                            Text("FS")
                                    })
                                        
                                    }
                                }
                                .frame(width: self.isFullScreen ? geometry.size.height : geometry.size.width, height: self.isFullScreen ? geometry.size.width : geometry.size.height / 3)
                                .rotation3DEffect(
                                    Angle(degrees: isFullScreen ? -90 : 0),
                                    axis: (x: 0.0, y: 0, z: 1.0),
                                    anchor: .bottom,
                                    anchorZ: 0.0,
                                    perspective: 1.0
                                )   
                            }
                    }
                 
                }.background(Color.red)
                .navigationBarHidden(self.isFullScreen)
                .navigationBarTitle(self.isFullScreen ? "" : "Demo", displayMode: .inline)
                
            }
        }.navigationViewStyle(StackNavigationViewStyle())

    }
}

Answer 1

RoundedRectangle 的大小应该没有问题。

根据我的尝试，导致此问题的是旋转锚点。 您可以通过在包含 RoundedRectangle 的 ZStack 上手动设置 a.offset() 修饰符来查看它。

这就是出现差距的原因：

当您将锚点设置为.bottom 旋转视图时，您将围绕包含 RoundedRectangle 的 ZStack 底部中心逆时针旋转。

同时，您正在使用新的宽度和高度值扩展 ZStack。

在 SwiftUI (iOS 14) 中，当视图在第一次渲染后被赋予更大的尺寸时，它们会从原来的左上角 position 向右下角扩展。

如果在旋转过程中发生这种情况，ZStack 的原始高度会旋转到屏幕的左侧，而原始的底部中心锚点固定在屏幕的中心。 添加的尺寸 (geometry.size.width - geometry.size.height/3) 从设备屏幕的中心垂直线开始增长。

示例（在 iPhone X 屏幕上，宽度：375，高度（安全区域）：690）：旋转前：矩形的垂直尺寸：230，水平尺寸：375，居中对齐屏幕。 围绕矩形底部中心旋转后： 矩形垂直尺寸为 690，水平尺寸为 375，中心不再与屏幕对齐。 从屏幕中心算起，矩形向左有 230 个像素，向右有 (375 - 230 =) 145 个像素。 因此，间隙的大小为 (375/2 - 145 =) 42.5

因此，旋转后存在间隙，而 RoundedRectangle 似乎向左移动了几个像素。

自己去试一下，弄清楚实际情况是值得的。 谢谢你。