SwiftUI 中的填充、偏移或 position

Question

我正在尝试 position 一个圆圈，使其中心位于这样的矩形顶部。 圆的直径不必与矩形的宽度相同。

我想了解的是实现这一目标的最佳和最实用的方法是什么？ 在这种情况下，我应该使用填充、偏移还是 position，它是否适用于不同的设备/屏幕尺寸？ 似乎它们中的任何一个都可以使用，但哪个更理想？

这是我使用padding的结果。 我可以增加底部填充以达到我想要的效果，但不确定这是否是最好的方法。

Rectangle()
    .fill(Color.gray)
    .frame(width: 85, height: 175)
    .overlay(
        Circle()
            .fill(Color.black)
            .frame(width: 120)
            .padding(.bottom, 50)
    )

Answer 1

对于形状，一个好的方法是将叠加和偏移结合起来，如下所示：

Rectangle()
    .fill(Color.red)
    .frame(width: 100, height: 180)
    .overlay(
        Circle()
            .fill(Color.blue.opacity(0.5))
            .frame(width: 100)
            .offset(y: -90)
    )

Answer 2

这是可能的方法 - 只需使用 alignment 而无需硬编码偏移/位置。

使用 Xcode 12.4 / iOS 14.4 准备的演示

var body: some View {
    Rectangle()
        .fill(Color.gray)
        .frame(width: 85, height: 175)
        .overlay(
            Circle()
              .stroke(Color.black,
                    style: StrokeStyle(
                         lineWidth: 2,
                         lineCap: .round,
                         lineJoin: .miter,
                         miterLimit: 0,
                         dash: [5, 10],
                         dashPhase: 0
                    ))
              .frame(width: 85, height: 85)
              .alignmentGuide(.top) { $0[VerticalAlignment.center] } // << this !!
        , alignment: .top)    // and this !!
}