SwiftUI - Add a Navigation Bar Button on Condition

Question

Given i have a view like this..

@State var tabIndex: Int = 0
           
 var body: some View {

  TabView(selection: $tabIndex)
  {
   Text("Tab 1").tabItem({
    Image(systemName: "message")
   }).tag(0)           
                
   Text("Tab 2").tabItem({
    Image(systemName: "arkit")
   }).tag(1)             
          
   Text("Tab 3").tabItem({
    Image(systemName: "battery.100")
   }).tag(2)
  }.navigationBarTitle("Tabbed View")
            
 }

This produces a view like this which is what is expected:

to add a navigation button to the bar i can use

 .navigationBarItems(trailing:
  Button(action: {print("Button was tapped")}) {
   Image(systemName: "plus")
    .resizable().frame(width: 20, height: 20)
  })

Which adds the button as expected

Is there any way to only add (or show) the button based on a condition?

if (self.tabIndex == 1){
  show button
}
else {
 don't show button
}

Answer 1

As .navigationBarItems will be deprecated in a future version of iOS it's better to use .toolbar(_:) View Modifier.

.toolbar {
    ToolbarItemGroup(placement: .navigationBarTrailing) {
        if tabIndex == 2 {
            // show button
        }
    }
}

Answer 2

Here is possible approach

.navigationBarItems(trailing: self.tabIndex == 1 ? 
    AnyView(self.trailingButton) : AnyView(EmptyView()))

somewhere below body

var trailingButton: some View {
  Button(action: {print("Button was tapped")}) {
   Image(systemName: "plus")
    .resizable().frame(width: 20, height: 20)
  }
}

Answer 3

If you don't want to use AnyView, you could also use Group or Opacity too.

.navigationBarItems(trailing: Group {
  if self.tabIndex == 1 {
    Button(action: {print("Button was tapped")}) {
     Image(systemName: "plus")
      .resizable().frame(width: 20, height: 20)
    }
  }
})

.navigationBarItems(trailing: 
    Button(action: {print("Button was tapped")}) {
     Image(systemName: "plus")
      .resizable().frame(width: 20, height: 20)
    }.opacity(self.tabIndex == 1 ? 1 : 0)
)

Answer 4

I know this question has an accepted answer and I used it in my own solution but here's what I did:

var doneButton:AnyView {
    if !fromPreferences {
        return AnyView(Button(action: self.doneAction) {
            Text("Done")
        })
    }
    return AnyView(EmptyView())
}

and how I used it in the body:

.navigationBarItems(trailing: doneButton)

thanks @Asperi for the solution!