SwiftUI 中 rotationEffect 在 NavigationView 内运行效果异常问题问询

核心原因 #

原代码中背景视图的布局约束不完整，放入NavigationView后受导航栏布局、安全区规则影响，旋转参考的中心点计算发生偏移，同时动画触发时机早于视图布局稳定节点，也会加剧锚点偏移问题。

修复后代码 #

BackgroundView 组件 #

struct BackgroundView: View {
    @State private var rotateBlob : Bool = false

    var body: some View {
        GeometryReader { bounds in
            ZStack {
                Image("Inner Blob 1")
                    .rotationEffect(.degrees(rotateBlob ? 360 : 0),anchor: .center)
                    .animation(Animation.linear(duration: 3).repeatForever(autoreverses: false), value: rotateBlob)
            }
            // 明确设置容器宽高与GeometryReader一致，居中对齐
            .frame(width: bounds.size.width, height: bounds.size.height, alignment: .center)
        }
        // 若不需要背景铺满安全区可删除该行
        .edgesIgnoringSafeArea(.all)
        .onAppear(perform: {
            // 延迟到布局稳定后再触发动画
            DispatchQueue.main.async {
                self.rotateBlob = true
            }
        })
    }
}

调用侧代码 #

struct RotationBug: View {
    var body: some View {
        NavigationView{
            VStack{
                BackgroundView()
            }
            // 明确设置容器占满全部可用空间，避免被导航栏挤压布局
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .navigationTitle("Profile")
        }
    }
}

关键修改说明 #

• 给ZStack补充高度约束和居中对齐规则，确保旋转容器的中心点和父视图中心点完全对齐，不受内容尺寸、父容器布局变化影响
• 动画补充value绑定，适配SwiftUI新版动画声明规范，避免隐式动画异常
• 旋转状态触发延迟到主队列下一个执行周期，确保此时视图布局已经完全稳定，中心点计算不会出错
• 外层VStack补充占满全屏的约束，避免NavigationView默认的顶部留白挤压背景视图的布局

内容的提问来源于stack exchange，提问作者Satya Prakash Sahu