SwiftUI - How to make a center-aligned menu?

Viewed 805

I am trying to make a menu with SwiftUI on iOS.

If the button that opens the menu is center-aligned, I wish the menu would be center-aligned as well. Regardless of the icon or texts used in the button. How to do it?

What is strange is that menu's alignment changes depending on the button's content. If I use one icon, it is center-aligned as expected. But if I use another icon, it is left-aligned.

enter image description here

Here is my code:

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            ZStack {
                VStack {
                    Text("Some text.")
                }
                
                VStack(alignment: .center) {
                    Spacer()
                    
                    Menu {
                        Button(action: {}) {
                            Label("Menu item", systemImage: "star")
                        }
                        
                        Button(action: {}) {
                            Label("Menu item", systemImage: "star")
                        }
                    } label: {
                        Image(systemName: "plus") // left-aligned menu
                        // Image(systemName: "line.horizontal.3") // center-aligned menu
                            .foregroundColor(Color.white)
                            .padding()
                            .background(Color.accentColor)
                            .clipShape(Rectangle())
                    }
                }
            }
            .navigationTitle("Content")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

So far I have tried few things: adding .frame, embedding menu and button in HStacks and VStacks.

The only thing that center-aligned menu with plus button was this:

// other code

Menu {
    Button(action: {}) {
        Label("Menu item", systemImage: "star")
    }
    
    Button(action: {}) {
        Label("Menu item", systemImage: "star")
    }
} label: {
    HStack {
        Spacer()
            .allowsHitTesting(false)
        
        Image(systemName: "plus")
            .foregroundColor(Color.white)
            .padding()
            .background(Color.accentColor)
            .clipShape(Rectangle())
        
        Spacer()
            .allowsHitTesting(false)
    }
}

// other code

After I have embedded label Image in HStack with Spacer() before and after - menu is centered. But... these Spacers are now clickable which I don't want. I was thinking that adding .allowsHitTesting(false) to Spacer() will disable taps on them, but it didn't.

Any other ideas? :)

EDIT: I have just tested with "plus" button on few other simulators and menu has different alignment on different simulators (all with iOS 14.5):

left-aligned:

  • iPhone Xs
  • iPhone 11 Pro
  • iPhone 12 mini

center-aligned:

  • iPhone 8
  • iPhone 8 Plus
  • iPhone 11
  • iPhone 11 Pro Max
  • iPhone 12
  • iPhone 12 Pro
  • iPhone 12 Pro Max
  • iPhone SE 2nd generation

Is it a bug or is there some alignment option I am missing?

0 Answers
Related