SwiftUI中仅动画单张图片却导致整个VStack偏移的问题

我尝试在VStack内对单张图片执行缩放动画，但不知为何整个VStack会从屏幕左侧边缘移入移出（给VStack添加背景色可清晰观察该现象）。图片本身能按预期放大缩小，但我无法理解为何整个屏幕会随之移动。

以下是原始代码：

struct ContentView: View
{
@State var scale = 0.1

    var body: some View
    {
        NavigationStack
        {
            VStack
            {
                Text("")
                    .frame(width: getScreenBounds().width * 0.80, height: getScreenBounds().height * 0.03)
                
                Image("CVT1")
                    .resizable()
                    .scaledToFill()
                    .frame(width: getScreenBounds().width * 0.80, height: getScreenBounds().height * 0.05)
                    .scaleEffect(scale)
                    .onAppear
                    {
                        let baseAnimation = Animation.smooth(duration: 3)
                        let repeated = baseAnimation.repeatCount(3)
                        
                        withAnimation(repeated)
                        {
                            scale = 1.0
                        }
                    }
            }
        }
    }
}

问题原因 #

scaleEffect默认以视图中心为锚点缩放，但图片初始缩放比例极小（0.1）时，它的布局占位空间仍是.frame设置的固定宽高。动画过程中，SwiftUI布局系统会因视图视觉边界的动态变化，错误调整VStack的位置，导致整体偏移。另外，直接用getScreenBounds()硬编码屏幕尺寸设置frame，未考虑NavigationStack的安全区域和布局自适应，也会加剧布局不稳定。

修复方案 #

1. 添加.clipped()裁剪超出区域：
   缩放后超出原始frame的图片部分会被裁剪，避免视觉边界扩展干扰VStack的布局计算。
2. 替换硬编码尺寸为自适应布局：
   用.frame(maxWidth: .infinity)配合padding替代固定屏幕比例，适配不同设备。
3. 显式设置缩放锚点（可选）：
   虽默认锚点为中心，但显式声明.scaleEffect(scale, anchor: .center)能让代码逻辑更清晰。

修复后的代码：

struct ContentView: View {
    @State var scale = 0.1

    var body: some View {
        NavigationStack {
            VStack {
                Text("")
                    .frame(height: UIScreen.main.bounds.height * 0.03)
                    .frame(maxWidth: .infinity)
                    .padding(.horizontal, UIScreen.main.bounds.width * 0.1)
                
                Image("CVT1")
                    .resizable()
                    .scaledToFill()
                    .frame(height: UIScreen.main.bounds.height * 0.05)
                    .frame(maxWidth: .infinity)
                    .padding(.horizontal, UIScreen.main.bounds.width * 0.1)
                    .clipped() // 关键：裁剪超出frame的部分
                    .scaleEffect(scale)
                    .onAppear {
                        let baseAnimation = Animation.smooth(duration: 3)
                        let repeated = baseAnimation.repeatCount(3)
                        withAnimation(repeated) {
                            scale = 1.0
                        }
                    }
            }
        }
    }
}

额外优化建议 #

避免直接使用UIScreen.main.bounds，推荐用GeometryReader获取父视图可用空间，让布局更响应式：

struct ContentView: View {
    @State var scale = 0.1

    var body: some View {
        NavigationStack {
            GeometryReader { geo in
                VStack {
                    Text("")
                        .frame(height: geo.size.height * 0.03)
                        .frame(maxWidth: .infinity)
                        .padding(.horizontal, geo.size.width * 0.1)
                    
                    Image("CVT1")
                        .resizable()
                        .scaledToFill()
                        .frame(height: geo.size.height * 0.05)
                        .frame(maxWidth: .infinity)
                        .padding(.horizontal, geo.size.width * 0.1)
                        .clipped()
                        .scaleEffect(scale)
                        .onAppear {
                            let baseAnimation = Animation.smooth(duration: 3)
                            let repeated = baseAnimation.repeatCount(3)
                            withAnimation(repeated) {
                                scale = 1.0
                            }
                        }
                }
            }
        }
    }
}

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