20.1 C
Canberra
Sunday, December 14, 2025

SwiftUI Menu all the time seems at prime of label – the right way to present it at middle of tappable space?


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:

SwiftUI Menu all the time seems at prime of label – the right way to present it at middle of tappable space?

Anticipated conduct: Menu ought to seem within the middle of this space:

[SCREENSHOT 2 - empty upload area]

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.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

[td_block_social_counter facebook="tagdiv" twitter="tagdivofficial" youtube="tagdiv" style="style8 td-social-boxed td-social-font-icons" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjM4IiwiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdCI6eyJtYXJnaW4tYm90dG9tIjoiMzAiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3Njh9" custom_title="Stay Connected" block_template_id="td_block_template_8" f_header_font_family="712" f_header_font_transform="uppercase" f_header_font_weight="500" f_header_font_size="17" border_color="#dd3333"]
- Advertisement -spot_img

Latest Articles