如何在 SwiftUI 中隐藏单击按钮

Question

i want to hide one button after it's clicked and show the other and vice versa.

By default the lock button should be the one that displays first. After clicking on it, only the second unlock button should show in the same position.

                  Button { //lock button
                    app.statusBar?.stop()
                   
                } label: {
                    Image(systemName: "lock")
                }
                                  
                    Button { //unlock button
                        app.statusBar?.start()
                       
                    } label: {
                        Image(systemName: "lock.open")
                    }
                }

This is for a macOS app.

Answer 1

Why not simply one button?

@State private var isLocked = false

...
    
    Button { //lock button
        isLocked.toggle()
        if isLocked {
            app.statusBar?.stop()
        } else {
            app.statusBar?.start()
        }
    } label: {
        Image(systemName: isLocked ? "lock" :  "lock.open")
    }

If you really want two buttons you can hide one with the opacity modifier

Button {

  ... 

}
.opacity(isLocked ? 1.0 : 0.0)

Answer 2

You need to set a condition through an @State variable. When the variable toggles between true to false, the proper Button will be shown accordingly.

Here is an example:

struct Example: View {
    @State private var free = true

    var body: some View {

            if free {

                Button { //lock button
                    app.statusBar?.stop()
                    free = false                   
                } label: {
                    Image(systemName: "lock")
                }

            } else {
                                  
                 Button { //unlock button
                        app.statusBar?.start()
                        free = true
                 } label: {
                        Image(systemName: "lock.open")
                 }
            }

    }
}

Answer 3

you could use the.hidden() modifier

Button {

  ... 

}
.hidden()