I count on that UIKit may allow you to management the place of the menu extra exactly, however, sadly, you do not have a lot management with SwiftUI. I’m guessing, the Reminders app shouldn’t be applied utilizing SwiftUI.
For the case proven within the first block of code, you may improve the tappable space by making use of a body to the menu label and setting a content material form. That is just like what you had been doing within the potential answer you confirmed within the query. It may be carried out with out an HStack:
Menu {
// ... buttons, as earlier than
} label: {
Textual content("Add Query")
.foregroundStyle(Coloration.white)
.background(Coloration.black)
.body(maxWidth: .infinity, alignment: .main)
.contentShape(Rectangle())
}
Nevertheless, while you faucet the row, the menu all the time aligns to the center of the row, even while you faucet on the textual content (as you additionally defined within the query):
Listed here are some potential workarounds, none of that are excellent, however they may assist:
1. Experiment with minWidth
In my exams on an iPhone 16 simulator, the purpose at which it switches from left-alignment to center-alignment is when the width of the label is larger than about 273 factors. That is about two-thirds of the display screen width on an iPhone 16, nevertheless it may be totally different on different units. So if the body on the label is modified from maxWidth: .infinity to, say, minWidth: 270, this provides a bigger hit space with the menu nonetheless left-aligned. Nevertheless, the hit space won’t embrace the trailing space on the suitable of the row.
Textual content("Add Query")
.foregroundStyle(Coloration.white)
.background(Coloration.black)
.body(minWidth: 270, alignment: .main) // 👈 modified
.contentShape(Rectangle())
2. Offset the label with padding to compensate
As we now have seen, when the label has most width, the menu is centered. It seems that if the middle of the row is shifted, the menu strikes too.
The middle of the row might be shifted by making use of a optimistic x-offset to the label, then compensating with unfavorable main padding on the Menu.
- Through the use of
.offsetas a substitute of main.paddingfor the label, the width accessible for the textual content doesn’t change. So an extended label will solely wrap if the total row width is simply too slim. - Through the use of unfavorable padding for the
Menu, the hit space doesn’t transfer. If as a substitute a unfavorable offset is used, the right-side of the row is now not receptive to faucets.
personal let labelOffset: CGFloat = 20
Menu {
// ... buttons, as earlier than
} label: {
Textual content("Add Query")
.foregroundStyle(Coloration.white)
.background(Coloration.black)
.body(maxWidth: .infinity, alignment: .main)
.contentShape(Rectangle())
.offset(x: labelOffset) // 👈 added
}
.padding(.main, -labelOffset) // 👈 added
When the dimensions of the offset is small, the menu strikes by half this measurement. For instance, if the offset is 20 (as above), the menu is proven 10 factors to the left of middle.
There appears to be a threshold, above which the menu alignment switches from the middle of the row to the left facet of the row. In my exams on an iPhone 16 simulator, the edge was round 40. This worth occurs to be the gap from the sting of the display screen to the row content material. When the checklist row insets are modified, the edge additionally modifications. So the edge in all probability is determined by the insets.
Rising the offset above this threshold makes no distinction. So to maneuver the menu to the left, the offset would not have to be an actual quantity, it simply must be greater than the edge.
Right here is the way it appears to be like utilizing an offset of fifty. It additionally appears to be like precisely the identical when you use an offset of 100:
To tremendous tune the positioning, it could be good if the menu may very well be moved to the suitable by about 12 factors, in order that it aligns with the row. Sadly, I could not discover a approach to do that😢
3. Add trailing padding to the menu
As type of a mixture of the 2 workarounds above, the menu may also be moved to the left facet by including trailing padding to the menu.
The quantity of padding that’s wanted corresponds once more to the edge offset mentioned above for workaround 2. So with the default checklist insets, the padding for an iPhone 16 must be at the very least 40. On an iPad, it must be bigger (100 works).
-
The hit space on the right-side of the row is lowered by the padding quantity, so it’s best to maintain the padding to the minimal essential.
-
Destructive padding might be added to the label to stop the textual content from wrapping, if wanted. Nevertheless, this does not assist to extend the hit space.
This variant offers higher menu alignment. So although the hit space excludes the width of the padding on the suitable facet of the row, it’s a higher answer than workaround 1:
Menu {
// ... buttons, as earlier than
} label: {
Textual content("Add Query")
.foregroundStyle(Coloration.white)
.background(Coloration.black)
.body(maxWidth: .infinity, alignment: .main)
.padding(.trailing, -40) // 👈 added
.contentShape(Rectangle())
}
.padding(.trailing, 40) // 👈 added
