SwiftUI overlay deprecated alternatives

Question

I'm trying to follow this calculator tutorial but am running into several issues. One of the issues is the use of the .overlay method. I'm assuming it doesn't work because it is deprecated, but I can't figure out how to get the recommeded way or get anything else to work to solve it, so am reaching out for options.

Xcode 12.4 Target: iOS 14.4

Here is the code in that section:

struct CalculatorButtonStyle: ButtonStyle {
    
    var size: CGFloat
    var backgroundColor: Color
    var foregroundColor: Color
    var isWide: Bool = false
    
    func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .font(.system(size: 32, weight: .medium))
                .frame(width: size, height: size)
                .frame(maxWidth: isWide ? .infinity : size, alignment: .leading)
                .background(backgroundColor)
                .foregroundColor(foregroundColor)
/*    //Commented out to compile
                .overlay( {
                    if configuration.isPressed {
                        Color(white: 1.0, opacity: 0.2)
                    }
                    )
                }
 */
            //.clipShape(Capsule())  //this makes circle buttons
        
    } //func
} //struct 

I've tried commenting out that section which is the only way to have it compile, but then the button press action of showing a different color does not work.

Answer 1

Overlay is not deprecated. Where did you read that. I think your problem is that you try to use the overlay function in a button style, which is not possible. You can only use it in a view. The error you wrote behind it, also states that. I'm also not sure what you want to achieve, because doesn't it work correct if you just not use the overlay?

I get this button without the overlay. Is that what you need?

With the button style:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button("1") {
                print("being pressed")
            }
            .buttonStyle(
                CalculatorButtonStyle(
                    size: 40,
                    backgroundColor: .cyan,
                    foregroundColor: .black
                )
            )
        }
        .padding()
    }
}

I also added the changed button style.

import SwiftUI

struct CalculatorButtonStyle: ButtonStyle {
    
    var size: CGFloat
    var backgroundColor: Color
    var foregroundColor: Color
    var isWide: Bool = false
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(size: 32, weight: .medium))
            .frame(width: size, height: size)
            .frame(maxWidth: isWide ? .infinity : size, alignment: .leading)
            .background(backgroundColor)
            .foregroundColor(configuration.isPressed ? Color(white: 1.0, opacity: 0.2) : foregroundColor)
            .clipShape(Capsule())  //this makes circle buttons
        
    }
}