SwiftUI：如何让矩形在带自定义锚点缩放的视图中居中？

解决办法 #

要让绿色矩形不管怎么调缩放、偏移，都稳稳待在ContainerView（就是那个黄色背景的100×100视图）中心，按下面两步改就行：

1. 先把修饰符顺序理对（这步不能少）

SwiftUI里修饰符的顺序直接影响布局结果，你原来的代码把frame放在了scaleEffect和offset后面，导致缩放和偏移都是作用在默认大小的矩形上，不是你要的350×350的矩形。得把frame移到最前面：

Rectangle()
    .fill(.green)
    .frame(width: 500 * 0.7, height: 500 * 0.7) // 先把矩形尺寸定好
    .scaleEffect(i.scale, anchor: .center) // 明确指定以中心为缩放锚点，这样缩放时中心不会跑
    .offset(x: i.frame.origin.x, y: i.frame.origin.y)

2. 加个补偿偏移，抵消自定义偏移并居中

绿色矩形默认是350×350，比innerContainerView大很多，默认是左上角对齐的，得加个偏移让它中心和innerContainerView的中心对上，同时还要抵消你自己设的i.frame.origin偏移。直接在原来的offset后面再加一段：

.offset(x: -125 - i.frame.origin.x, y: -125 - i.frame.origin.y)

这里的-125是算出来的固定值：innerContainerView中心是(50,50)，绿色矩形中心是(175,175)，所以需要往左上移125个单位才能对齐中心。而-i.frame.origin.x/y刚好能抵消你自己设的偏移，不管你给i.frame.origin设什么值，都会被抵消掉，最后矩形只会保持在中心位置。

改完后的绿色矩形完整代码

Rectangle()
    .fill(.green)
    .frame(width: 500 * 0.7, height: 500 * 0.7)
    .scaleEffect(i.scale, anchor: .center)
    .offset(x: i.frame.origin.x, y: i.frame.origin.y)
    .offset(x: -125 - i.frame.origin.x, y: -125 - i.frame.origin.y)

补充说明

• 如果之后你把缩放锚点改成非中心的位置，还得额外算锚点偏移带来的位置变化，再加对应的补偿量；
• ContainerView外层的scaleEffect(fscale)和offset(foffset)是对整个黄色视图的变换，绿色矩形会跟着黄色视图一起动，始终保持相对黄色视图的中心位置不变。

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