SwiftUI中围绕安全区域的缩放动画异常问题

你的问题出在修饰符顺序和布局依赖关系上：ignoresSafeArea和scaleEffect的顺序颠倒，加上YellowView内部布局依赖父容器的最大尺寸，导致缩放时安全区域边界和布局重计算共同触发了元素偏移。

修复方案： #

1. 调整修饰符顺序：将ignoresSafeArea()放在scaleEffect之后，确保缩放的是已经脱离安全区域约束的视图
2. 优化内部布局：让YellowView的内部元素基于自身坐标系定位，而非依赖父容器的maxWidth/maxHeight

修改后的完整代码： #

import SwiftUI

struct ContentView: View {
    @State private var scale = false
    var body: some View {
        GeometryReader { proxy in
            ZStack {
                YellowView()
                    .scaleEffect(scale ? 0.8 : 1, anchor: .center) // 显式指定锚点，确保缩放中心稳定
                    .ignoresSafeArea() // 移到缩放之后，避免安全区域干扰缩放逻辑
                    .offset(x: 100)
                
                Button {
                    withAnimation(.easeInOut(duration: 3)) {
                        scale.toggle()
                    }
                } label: {
                    Text("Scale")
                }
                .frame(maxWidth: .infinity,alignment: .leading)
                .padding()
            }
        }
    }
}

struct YellowView: View {
    var body: some View {
        ZStack(alignment: .top) { // 直接在ZStack指定顶部对齐，替代嵌套的frame(alignment: .top)
            // TopBar 直接基于ZStack顶部布局，不再依赖maxHeight
            Text("TopBar")
                .frame(maxWidth: .infinity)
                .background(Color.gray)
            
            // 中心内容保持在ZStack中心，无需额外frame约束
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.black)
                Text("Hello, world!")
            }
            .padding()
            .background(.cyan)
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.yellow)
    }
}

#Preview {
    ContentView()
}

修复说明： #

• 修饰符顺序调整后，视图先完成缩放变换，再脱离安全区域约束，避免了缩放过程中安全区域边界对视图尺寸的影响
• YellowView内部用ZStack的alignment直接控制TopBar位置，去掉了多余的frame(maxHeight: .infinity, alignment: .top)，让内部元素的位置完全基于自身容器的坐标系，缩放时只会整体缩放，不会出现局部偏移

内容的提问来源于stack exchange，提问作者Amirca