swift - SwiftUI 中的填充、偏移或位置

Question

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

我想了解的是，实现此目标的最佳和最实用的方法是什么？在这种情况下我应该使用填充、偏移或位置吗？它是否适用于不同的设备/屏幕尺寸？好像都可以，但是哪个更理想呢？

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

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

Answer 1

这是可能的方法 - 只使用对齐而不硬编码偏移量/位置。

使用 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 !!
}