如何将SwiftUI视图锚点设为左上角以匹配Figma坐标？

Figma里所有图层的定位锚点默认是左上角，但SwiftUI的position(_:)方法是把视图中心固定在指定坐标上——这就是两者设x:0、y:0时位置对不上的核心原因。下面是几种实用的解决方法：

方法1：计算偏移量调整position #

既然position定位的是视图中心，要让视图左上角对齐目标坐标，只需要把目标坐标加上视图自身宽高的一半（从左上角到中心的偏移量）。比如你的示例中Circle宽高都是132，那么中心坐标应该是(66,66)，修改代码后就能让Circle左上角对齐父容器的(0,0)：

import SwiftUI

struct ContentView: View {
    let circleSize = CGSize(width: 132.0, height: 132.0)
    
    var body: some View {
        ZStack {
            Circle()
                .frame(width: circleSize.width, height: circleSize.height)
                .position(x: circleSize.width / 2, y: circleSize.height / 2)
        }
        .frame(width: 731, height: 418)
        .background(.blue)
    }
}

方法2：用父容器对齐+offset直接复用Figma坐标 #

如果想直接用Figma里给出的左上角坐标，更直观的方式是修改父容器的对齐方式为左上角，再用offset来定位（不需要额外计算偏移量）：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Circle()
                .frame(width: 132.0, height: 132.0)
                // Figma里给的x、y值直接填在这里即可
                .offset(x: 0, y: 0)
        }
        .frame(width: 731, height: 418)
        .background(.blue)
    }
}

这种方式适合批量还原Figma设计，不用每次计算宽高的一半，直接抄坐标就行。

方法3：自定义锚点（alignmentGuide） #

如果需要更灵活地修改视图的锚点，可以通过alignmentGuide来强制指定锚点位置：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Circle()
                .frame(width: 132.0, height: 132.0)
                .alignmentGuide(.top) { $0[.top] }
                .alignmentGuide(.leading) { $0[.leading] }
                .position(x: 0, y: 0)
        }
        .frame(width: 731, height: 418)
        .background(.blue)
    }
}

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