问题描述
我想旋转我的视图，以便它更改其框架并在旋转时覆盖整个屏幕。我尝试了所有类型的旋转以及不同的锚点。在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())
}
}
解决方法
RoundedRectangle的大小应该没有任何问题。
根据我的尝试，是导致此问题的旋转锚点。您可以通过在包含StackedRectangle的ZStack上手动设置.offset（）修饰符来看到它。
这就是出现差距的原因：
在将锚点设置为.bottom的情况下旋转视图时，您将绕着包含RoundedRectangle的ZStack底部中心逆时针旋转。
同时，您正在使用新的width和height值扩展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似乎向左移动了几个像素。
值得自己弄清楚实际情况。谢谢。