SwiftUI Button is not grayed out when tapping

Question

I am really trying to understand something. I want to create a button with some text on it. The button have a frame and a color (color is same as background). When I tap that button I want the some effect to produce (some kind of discolouration to entire button). If the color is the same as the background just the text is coloured different during the tap. If I have a button with red background the effect is produced to the whole button. I have attached a picture on how things should look.

Before tap button should look like this:

When the user press the button (without release) the button looks like this:

In my case the red rectangle color is the same as the background color.But I want to have the same rectangle overlay. Instead of this I obtain the following.

Before tap:

During the tap:

In this case only the number has some sort of overlay. But the rectangle not.

Here is the code. What should I change to obtain the same feedback if the button is coloured the same as the background?

Button(action: {
    some action
}){
    Text("1")
        .font(.title)
        .foregroundColor(.blue)
        .frame(width: 80, height: 48)
        .background(Color.white)
        .cornerRadius(4)
}

Crosscut

Answer 1

I cannot say that understood what exactly you want to achieve, but different visual feedback on button pressed can be done with help of button style. Within a style we have access to isPressed state, so can conditionally change presentation of button depending on that.

Here is some demo that should be helpful

Button(action: {
    some action
}){
    Text("1")
}
.buttonStyle(MyButtonStyle())

struct MyButtonStyle: ButtonStyle {

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
        .font(.title)
        .foregroundColor(configuration.isPressed ? .white : .blue) // << ex. !!
        .frame(width: 80, height: 48)
        .background(configuration.isPressed ? Color.clear : Color.white)   // << ex. !!
        .cornerRadius(4)
    }
}

Margetmargette

thank you for the suggestion. I attached some photos in order to better understand – Crosscut

Answer 2

I did not understand the question very well, however what I can tell is that you have a button that has a background the same as your main background, and you want the effect of when the user press the button, why not adding some Shadow?

    Button(action: {
        
    }){
        Text("1")
            .font(.title)
            .foregroundColor(.blue)
            .frame(width: 80, height: 48)
            .background(Color.white)
            .cornerRadius(4)
            .shadow(color: Color.black.opacity(0.5), radius: 2, x: 0, y: 0)
    }

The result as you said:

Horseflesh

Answer 3

I understood your question. I think button pressed effect adopts color according to background color so I have just hacked this trick. In my code I have just used one ZStack and give white background color like this :

struct ContentView: View {
  var body: some View {
    ZStack{
      Color.red
      ZStack{
        Rectangle().fill(Color.white)
        Button(action: {
          //      some action
        }){
          Text("1")
            .font(.title)
            .frame(width: 80, height: 48, alignment: .center)
            .background(Color.red)
        }//.buttonStyle(MyButtonStyle()) // Set style if you want custom color on press event and remove background color from text.
      }.frame(width: 80, height: 48, alignment: .center).cornerRadius(4)
    }
  }
}

struct MyButtonStyle: ButtonStyle {
  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
      .background(configuration.isPressed ? Color.blue.opacity(0.5) : Color.red)
  }
}

If you want to add your own color on the press then set button style and remove the background color from Text.

Hope this useful :)

Ajar