CODEWITHSUNDEEP
iosswiftswiftui
Amin
Amin

Reputation: 317

Button style label image and text foreground color change at a different time?

I have a question about a part of my code in my custom button style. So I created a custom button style and this is what I am returning:

struct CustomStyle: ButtonStyle{
    func makeBody(configuration: Configuration) -> some View {
        return AnyView(Label {
            configuration.label
        } icon: {
            Image(systemName: "plus").resizable().frame(width: 30, height: 30)
        })
        .foregroundColor(
            configuration.isPressed ? Color.blue : Color.red
        )
        .padding()
        .frame(maxWidth: .infinity, minHeight: 20)
        .background(Color.yellow)
        .clipShape(Capsule())
    }
}
struct ContentView: View {
    var body: some View {
    
        VStack {
            Button(action: {}, label: { Text("amin") })
                .buttonStyle(CustomStyle())
        }
    
    }
}

The foregroundColor should change when I tap the button, and it does change. The issue is, the icon takes a few more milliseconds to go back to its original color. For example, let's say the color of the text and icon is red. When I click on the button both become blue, but text goes back to red immediately once I let go and icon(image) goes back to red with a very brief(a few millisecond) animation. I want both to be synced.

notes: I know that most of the time in button styles we just return configuration.label, but what I am returning also works and has no issues. I have to do this because I want my button to have an image next to its text. icon in this case is Image(systemName: "plus")

Upvotes: 2

Views: 967

Answers (1)

Asperi
Asperi

Reputation: 258345

It is possible to fix by just disabling animation (tested with Xcode 13.4 / iOS 15.5)

struct CustomStyle: ButtonStyle{
    func makeBody(configuration: Configuration) -> some View {
        Label {
            configuration.label
        } icon: {
            Image(systemName: "plus").resizable().frame(width: 30, height: 30)
        }
        .animation(.none, value: configuration.isPressed)     // << here !!
        .foregroundColor(
            configuration.isPressed ? Color.blue : Color.red
        )

Upvotes: 2

Related Questions