swiftuiios13ios-navigationview

Toggle a button on Navigation Bar in SwiftUI & have it change appearance


Using SwiftUI, I would like to have the ability to change the button on my NavigationView based upon some Bool value indicating if it should be On or Off.

enter image description here

This would behave similar to how with UIKit you can replace a bar button item on either side of the screen to show a different button & associated action upon clicking.


Solution

  • I am able to get it working with the following code, but I am not certain if this is the best way to accomplish it, so am open to improvement.

    import SwiftUI
    
    struct HomeList: View {
        @State var isOn = true
    
        var body: some View {
            NavigationView {
                List(1 ..< 4) { index in
                    Text("Row \(index)")
                }
                .navigationBarTitle(Text(verbatim: "Title"), displayMode: .inline)
                .navigationBarItems(trailing:
                    Button(action: {
                        self.isOn = !self.isOn
                    }, label: {
                        Text(self.isOn ? "On" : "Off")
                    })
                )
            }
        }
    }
    

    The key pieces being:

    Finally, how it appears in action:

    enter image description here