SwiftUI - How to change the button's image on click?

Admin 1
Viewed 5543

I'm trying to make it so that when I click a button (that is part of a list of other buttons), the image for the clicked button changes from "star" to "star.fill". Please help!

ForEach(pies, id: \.self) { pie in
      Button(action: {
          // some action
       }) {
       HStack {
           Image(systemName: "star")
           Text(pie)
           Spacer()
       }
}
swiftui swift button
3 Answers

I have a play/pause button.
The button image changes depending on if it is playing or not.

In my View I have a variable:

@State var isPlaying : Bool = false

Then, whenever you click the button, isPlaying is changing -> if it was true it becomes false and vice versa. The button image is set by ternary operator.

Button(action: {
   self.isPlaying.toggle()
}) {
    Image(systemName: self.isPlaying == true ? "pause.fill" : "play.fill")
          .resizable()
          .frame(width: 60, height: 60)
}
user_138395210

You can use a @State variable to store the image name and change it on button click: 

@State var imageName: String = "star"

ForEach(pies, id: \.self) { pie in
      Button(action: {
          self.imageName = "star.fill"
       }) {
       HStack {
           Image(systemName: imageName)
           Text(pie)
           Spacer()
       }
}
user_86977930

You can use a custom button style to determine which image is displayed based on the pressed state:

struct ImageButtonStyle: ButtonStyle { 
    var image: String
    var pressedImage: String

    func makeBody(configuration: Self.Configuration) -> some View {
      let displayImage = configuration.isPressed ? pressedImage : image
      return Image(displayImage, bundle: Bundle(for: SomeClassInYourApp.self))
    }
}

For ease of use, you can create a view which uses the button style:

struct ImageButton: View {
    
    var image: String
    var pressedImage: String
    var action: () -> Void
    
    var body: some View {
        Button(action: self.action) { }
            .buttonStyle(ImageButtonStyle(image: image, pressedImage: pressedImage)
    }
}

Then use it like this:

ImageButton(
    image: "your_unpressed_image", 
    pressedImage: "your_pressed_image", 
    action: { ... }
)
user_78978650
Related