How to align a dynamic button in navigationBarItems - swiftui

Question

I'm trying to make a custom menu (dynamic based on the editMode) in the trailing part of the navigation bar. I need 3 buttons in "view" mode and only one in "edit" mode.
The problem is I can't align the buttons to the right as below:
As you can see, the "done" button is way to the left.
I tried adding Spacers() but no luck.
.navigationBarItems(
leading: BackButton(label: "") {
self.presentation.wrappedValue.dismiss()
},
trailing:
HStack {
if self.mode?.wrappedValue == .inactive {
HStack(alignment: .center, spacing: 20) {
Button(action: {
////////
}) {
Image(systemName: "trash")
.imageScale(.large)
}
////////
Button(action: {
}) {
Image(systemName: "square.and.arrow.up")
.imageScale(.large)
}
CustomEditButton() {
////////
}
}
} else {
HStack {
CustomEditButton() {
/////
}
}
}
}
)

Answer 1

Same issue. Spacer()'s inside or outside of conditional statement don't work.
I noticed is that the alignment is fixed/correct when popping back to the view from a NavigationLink screen, though...
In any case, I made it work on my end using opacities depending on the condition driving the changes.
In your case, a workaround may look like this:
.navigationBarItems(
leading: BackButton(label: "") {
self.presentation.wrappedValue.dismiss()
},
trailing:
ZStack {
HStack(alignment: .center, spacing: 20) {
Button(action: {
////////
}) {
Image(systemName: "trash")
.imageScale(.large)
}
Button(action: {
////////
}) {
Image(systemName: "square.and.arrow.up")
.imageScale(.large)
}
CustomEditButton() {
////////
}
}
.opacity((self.mode?.wrappedValue == .inactive) ? 1.0 : 0.0)
HStack {
CustomEditButton() {
/////
}
}
.opacity((self.mode?.wrappedValue == .inactive) ? 0.0 : 1.0)
}
)