SwiftUI中调整矩形尺寸时自动修正偏移以保持原位置

问题根源 #

你遇到的情况是因为SwiftUI默认是居中布局——当调整矩形宽度时，视图的左上角原点会自动偏移（比如宽度加20，原点会往左挪10）。之前手动在按钮里调offset太繁琐，用GeometryReader监听全局frame的尝试要么动画乱跳，要么视图抖得厉害，本质是offset和frame的更新互相触发，形成了循环依赖。

最简解决思路（推荐） #

直接简化状态管理，只维护矩形宽度，用计算属性自动算出需要的偏移量，彻底避开循环问题，还能保留你偏好的.animation修饰符：

import SwiftUI

struct ContentView: View {
    // 只维护当前矩形宽度，初始值设为基准宽度
    @State private var rectWidth: CGFloat = 200.0
    // 固定基准宽度和高度，方便计算偏移
    private let baseWidth: CGFloat = 200.0
    private let rectHeight: CGFloat = 50.0
    
    // 自动计算偏移：宽度变化的一半，刚好抵消居中布局的原点偏移
    private var offset: CGSize {
        CGSize(width: (rectWidth - baseWidth) / 2, height: 0)
    }
    
    var body: some View {
        VStack {
            Spacer()
            
            // 蓝色参考矩形
            Rectangle()
                .fill(Color.blue)
                .frame(width: baseWidth, height: rectHeight)
            
            // 可调整的红色矩形
            Rectangle()
                .fill(Color.red)
                .frame(width: rectWidth, height: rectHeight)
                .overlay(
                    Text("宽度: \(Int(rectWidth)) | 偏移: \(Int(offset.width))")
                        .bold()
                        .foregroundColor(.white)
                )
                .offset(offset)
                // 只给宽度加一次动画，偏移会自动跟着触发动画
                .animation(.default, value: rectWidth)

            Spacer()
            
            HStack {
                Button("增加宽度") {
                    rectWidth += 20.0
                }
                
                Button("减少宽度") {
                    // 加最小宽度限制，防止出现负数
                    rectWidth = max(rectWidth - 20.0, 40.0)
                }
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

方案优势 #

1. 状态简洁不易错：不用维护复杂的CGRect和手动offset，只跟踪一个rectWidth，减少状态同步的麻烦。
2. 偏移自动计算：计算属性offset直接基于宽度差的一半生成，完美抵消居中布局的原点偏移，不用手动算数值。
3. 动画不冲突：只给rectWidth加一次动画，偏移依赖宽度自动触发动画，不会出现多个动画修饰符导致的乱跳问题。
4. 彻底解决抖动：不用GeometryReader监听全局frame，避免了offset变化又触发frame更新的循环，视图稳定无抖动。

保留原CGRect状态的适配版本 #

如果你需要用rect存储更多信息（比如位置、高度），可以改成以下方式，同样能避免循环更新：

import SwiftUI

struct ContentView: View {
    @State private var rect: CGRect = CGRect(x: 0, y: 0, width: 200.0, height: 50.0)
    @State private var offset: CGSize = .zero
    // 记录初始宽度作为偏移基准
    private let initialWidth: CGFloat = 200.0
    
    var body: some View {
        VStack {
            Spacer()
            
            Rectangle()
                .fill(Color.blue)
                .frame(width: initialWidth, height: rect.height)
            
            Rectangle()
                .fill(Color.red)
                .frame(width: rect.width, height: rect.height)
                .overlay(
                    Text("原点: \(Int(rect.origin.x)), \(Int(rect.origin.y)) | 尺寸: \(Int(rect.width))x\(Int(rect.height))")
                        .bold()
                        .foregroundColor(.white)
                        .font(.caption)
                )
                .offset(offset)
                .animation(.default, value: rect.width)
                // GeometryReader仅在首次出现时获取初始位置，不监听后续变化
                .background(
                    GeometryReader { geo in
                        Color.clear
                            .onAppear {
                                rect.origin = geo.frame(in: .global).origin
                            }
                    }
                )

            Spacer()
            
            HStack {
                Button("增加宽度") {
                    let delta = 20.0
                    rect.size.width += delta
                    // 直接计算偏移量，无需等待frame变化
                    offset.width += delta / 2
                }
                
                Button("减少宽度") {
                    let delta = -20.0
                    rect.size.width = max(rect.size.width + delta, 40.0)
                    offset.width += delta / 2
                }
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

这个版本保留了你原来的rect状态，把偏移计算直接放在按钮操作中，同时避免了监听frame导致的循环，视图同样稳定。

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