SwiftUI - 在“x”和“y”处领先此视图的顶部位置答案

【问题标题】：SwiftUI - position at top leading this view at `x` and `y`SwiftUI - 在“x”和“y”处领先此视图的顶部位置
【发布时间】：2022-09-23 21:34:08
【问题描述】：

目标：将 SwiftUI 位置坐标与 Figma 匹配。

语境：在 Figma 上，锚点位于图层的顶部。如文档所述，在 SwiftUI 上，锚点位于图层的中心：

/// - Returns: A view that fixes the center of this view at `x` and `y`.
@inlinable public func position(x: CGFloat = 0, y: CGFloat = 0) -> some View

因此，当 SwiftUI 和 Figma 都设置为 x:0 和 y:0 位置时，它们不匹配。

问题：如何将 SwiftUI 中的锚点设置在顶部前导角？

import SwiftUI

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

    
    }

    

}

将一半宽度和一半高度添加到 x 和 y
不知道该怎么做。介意帮忙吗？ :)
对于形状，您可以使用 .position(x: 0 + 66, y: 0 + 66) 之类的条形码。但是对于可编辑的文本，如何动态获取 ex 的大小？
SwiftUI 旨在具有适应性，您输入的硬编码值越多，您就越难克服这些问题。至于您的最新问题，如果您想走这条路，那么 SO 中有很多关于获取视图大小的问题，在 iOS 16 中有Layout，但我建议您放弃硬编码的想法。

标签： ios xcode macos swiftui figma

【解决方案1】：

由于半径的原因，以 (0, 0) 为中心的圆将超出范围。您必须执行以下操作之一：

使用HStack & VStack：

ZStack {
    VStack {
        HStack {
            Circle()
                .frame(width: 132.0, height: 132.0)
            Spacer()
        }
        Spacer()
    }
}.frame(width: 731, height: 418)
.background(.blue)

以（x + 半径，y + 半径）为圆心：

ZStack {
    HStack {
    Circle()
        .frame(width: 132.0, height: 132.0)
    }
        .position(x: 66, y: 66)
    
}
.frame(width: 731, height: 418)
.background(.blue)

【讨论】：

谢谢！但问题是关于在顶部有一个锚点位置而不是定位圆圈本身，
在 Figma 中，您没有将圆心设置为 (0,0)，而是将 min x & y 设置为 (0, 0)
以及如何在 SwiftUI 中将 min x & y 设置为 (0, 0)？
我尝试使用 .offset 修饰符但没有用...
您可以在我的回答中使用 Stacks 方法来锚定它