0

我想旋转我的视图，以便它改变它的框架并在旋转时覆盖整个屏幕。我已经尝试了所有类型的旋转以及不同的锚点。这在 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())

    }
}
4

1 回答 1

0

RoundedRectangle 的大小应该没有任何问题。

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

以下是出现差距的原因：

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

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

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

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

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

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

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

于 2020-09-21T23:23:40.643 回答