Размещение SwiftUI вокруг центрального объекта

Question

Скажем, синий прямоугольник находится в центре красного прямоугольника, а зеленый должен быть сверху, а желтый слева.

Как это сделать в SwiftUI с направляющими для выравнивания? Ни один из размеров не известен, но желтая и синяя высота совпадают, а зеленая и синяя ширина совпадают.

Answer 1

Я получил помощь от https://swiftui-lab.com в твиттере

С моим вспомогательным методом:

      extension View {
    func overlay<Overlay: View>(alignment: Alignment, @ViewBuilder builder: () -> Overlay) -> some View {
        overlay(builder(), alignment: alignment)
    }
}

можно сделать так:

      Color.red
  .overlay(alignment: .bottom) {
    HStack(alignment: .top, spacing: 0) {
      Color.clear.frame(width: 0)
      Color.yellow
      .alignmentGuide(.top) { $0.height + 10 }
    }
  }
  .overlay(alignment: .trailing) {
    VStack(alignment: .leading, spacing: 0) {
      Color.clear.frame(height: 0)
      Color.blue
        .alignmentGuide(.leading) { $0.width + 10 }
    }
  }
  .padding(100) // padding given for the example