I am constructing a photograph add element in SwiftUI the place the complete rectangular space needs to be tappable to indicate a Menu with choices (Photograph Library / Digital camera).
The issue: It doesn’t matter what I attempt, the Menu popup all the time seems anchored to the TOP of the label, however I would like it to look on the CENTER of my tappable rectangle.
Present conduct:
Anticipated conduct: Menu ought to seem within the middle of this space:
My present code:
import SwiftUI
import PhotosUI
struct PhotoUploaderExample: View {
@State personal var selectedImage: UIImage?
@State personal var showingImagePicker = false
@State personal var showingCamera = false
personal let placeholderSide: CGFloat = UIScreen.foremost.bounds.width - 32
var physique: some View {
VStack(alignment: .main, spacing: 12) {
Textual content("Add a photograph")
.font(.system(dimension: 20, weight: .semibold))
photoUploadArea
}
.padding(.horizontal, 16)
.sheet(isPresented: $showingImagePicker) {
// Photograph library picker
}
.fullScreenCover(isPresented: $showingCamera) {
// Digital camera
}
}
var photoUploadArea: some View {
ZStack {
// Background rectangle with dashed border
RoundedRectangle(cornerRadius: 24)
.fill(Coloration.grey.opacity(0.05))
.strokeBorder(
Coloration.grey.opacity(0.3),
model: StrokeStyle(lineWidth: 2, sprint: [8, 5])
)
.body(width: placeholderSide, top: placeholderSide)
// Content material overlay - icon and button
VStack(spacing: 12) {
Picture(systemName: "photograph.badge.plus.fill")
.resizable()
.scaledToFit()
.body(width: 48, top: 48)
Textual content("Add a photograph")
.font(.system(dimension: 15, weight: .medium))
.padding(.horizontal, 20)
.padding(.vertical, 8)
.background(Coloration.grey.opacity(0.1))
.clipShape(Capsule())
}
// Menu - stretched to fill complete space
Menu {
Button(motion: {
showingImagePicker = true
}) {
Label("Photograph Library", systemImage: "photograph.on.rectangle")
}
Button(motion: {
showingCamera = true
}) {
Label("Digital camera", systemImage: "digital camera")
}
} label: {
Coloration.clear
.contentShape(Rectangle())
}
.body(width: placeholderSide, top: placeholderSide)
}
}
}
#Preview {
PhotoUploaderExample()
}
What I’ve tried:
- Wrapping Menu in several container views
- Utilizing Coloration.clear as label with .contentShape(Rectangle())
- Inserting a small invisible anchor at middle
Questions:
- Is there any native method to management Menu popup anchor place?
Searching for native SwiftUI options solely – no third-party libraries please.
Aim: Tapping anyplace contained in the rectangle (not simply the icon/button) ought to present the Menu centered inside that space.


![[SCREENSHOT 2 - empty upload area]](https://i.sstatic.net/kEJgcRMbm.png)