Заполнение, смещение или положение в 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 !!
}

Answer 2

Для форм хорошим подходом было бы комбинировать наложение и смещение следующим образом:

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