SwiftUI - 根据条件添加导航栏按钮

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

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 2

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 3

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!

Answer 4

Here is what worked for me, even when my condition was false which resulted in nothing being returned (the bar item correctly did not show, without errors). I find it a little cleaner than squeezing in a ternary operator.

.navigationBarItems(
    trailing: Button(
        action: {
            print("My Action")
        }
    ) {
        if myBool {
            Text("My Button")
        }
    }
)

Answer 5

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
        }
    }
}