在 SwiftUI iOS 14 中旋转视图

Posted 2023-02-24

【中文标题】在 SwiftUI iOS 14 中旋转视图

【英文标题】：Rotate a view in SwiftUI iOS 14

【发布时间】：2020-09-21 12:14:58

【问题描述】：

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

Regular View

When Entered Full Screen

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())

    

【问题讨论】：

这里一样！ iOS 14 出现了许多故障......

【参考方案1】：

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 似乎向左移动了几个像素。

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

【讨论】：

我按照您的建议尝试了偏移，它甚至将其固定在单个设备分辨率上，但在不同的设备上，它具有不同的偏移计算，即使使用几何阅读器也无法修复。是否有另一种解决方案/解决方法？我还尝试了所有可能的锚点，但仍然无法正确对齐

我建议不要在 SwiftUI 中同时使用旋转和大小更改...说实话，SwiftUI 呈现 UI 更改的方式可能因版本而异，并且仍然存在很多错误甚至在最新发布的 iOS 14 SDK 版本中也存在。如果可能，我建议仅使用大小更改（不进行旋转）。或者如果您坚持旋转效果，请尝试使用 UIKit 并使用 UIViewRepresentable 将其包装为 SwiftUI 视图。