带有菜单的 ToolbarItem 很难点击 - SwiftUI

Question

I try to create a (add/plus) button that shows a menu from which we can select the action we want to execute (it is similar to the Files, or Notes app on iPhone)

.navigationTitle("Hello World Everyone")
.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        Menu(content: {
            Button(action: {print("option A")}, label: {Label("My option A", systemImage: "folder.badge.plus")})
            Button(action: {print("option B")}, label: {Label("My option B", systemImage: "doc.badge.plus")})
        }, label: {
            Image(systemName: "plus")
                .imageScale(.large)
                .background(Color.red)
        })
    }
}

But the issue is that it is extremely hard to tap on this "plus" button ! On the other hand if instead of the Menu block I used a traditional Button block this issue disappears (but of course I loose the functionality that I want) (in Xcode 13b4 it is no-more the case)

Do you have any ideas?

EDIT 1:

Few people recommended me to add a padding to the label of Menu, which is a good idea but here is why it is not perfect:

The tappable area (represented in red) does not go until the trailing edge of the screen (see purple drawing). So if by misfortune the user tapped on this side of the add button (purple zone), the click will not work: in other words it remains quite hard to tap on this button!
And another issue is that the plus icon is shifted on the left from his default position

Answer 1

If you use Button inside Toolbar SwiftUI will automatically converts it into ToolBarButton , which customisation is not possible on ToolBarButton . Instead of passing a Button you can pass a Custom View .

        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Menu(content: {
                    Label("My option A", systemImage: "folder.badge.plus")
                        .onTapGesture { 
                            print("My option A") 
                        }
                    Label("My option B", systemImage: "doc.badge.plus")
                        .onTapGesture { 
                            print("My option B") 
                        }
                }, label: {
                    Image(systemName: "plus")
                        .imageScale(.large)
                        .background(Color.red)
                })
            }
        }

Answer 2

I'm not sure you can expand the buttons inside the Toolbar beyond the "safe area".

I just wanted to let you know that the actual button in this case is the Menu and not the Image in the label, so you're not highlighting the full button. See the full tapping area in green.

Also using a bigger image, like "plus.circle" gives you a bigger area.

Example image:

Example code:

.navigationBarBackButtonHidden()
.navigationTitle("Hello World Everyone")
.toolbar {
    ToolbarItemGroup(placement: .navigationBarTrailing) {
        Menu(content: {
            Button(action: {print("option A")}, label: {Label("My option A", systemImage: "folder.badge.plus")})
            Button(action: {print("option B")}, label: {Label("My option B", systemImage: "doc.badge.plus")})
        }, label: {
            Image(systemName: "plus")
                .imageScale(.large)
                .background(Color.red)
        })
        .background(Color.green)
        Menu(content: {
            Button(action: {print("option A")}, label: {Label("My option A", systemImage: "folder.badge.plus")})
            Button(action: {print("option B")}, label: {Label("My option B", systemImage: "doc.badge.plus")})
        }, label: {
            Image(systemName: "plus.circle")
                .imageScale(.large)
                .background(Color.red)
        })
        .background(Color.green)
    }
}