CODEWITHSUNDEEP
buttonswiftui
mogoco8594
mogoco8594

Reputation: 21

Why does my Button style object only work on the text within the button and not the entire button?

I have below a ButtonStyle object that I wish to use when a Button is tapped. However, when I call it on my Button, the effect is seen only on the text within the button and not on the entire Button as a whole. I have tried calling it outside but to no avail. Can someone please explain to me how I can fix my error?

Button(action: {

    }) {
        Text("Button")
            .foregroundColor(.white)
    }.background(Color.red)
     .buttonStyle(ScaleButtonStyle())


struct ScaleButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .scaleEffect(configuration.isPressed ? 5 : 1)
    }
}

EDIT:

Button(action: {}) {
            Text("Button")
                .fontWeight(.semibold)
                .foregroundColor(.white)
                .font(.title)
        }
        .buttonStyle(ScaleButtonStyle(bgColor: Color.red))
        .frame(width: geo.size.width*0.8, height: geo.size.height*0.1, alignment: .center)
        .background(Color.red)
        .clipShape(Rectangle())


struct ScaleButtonStyle: ButtonStyle {
 let bgColor: Color

 func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
        .background(bgColor)
        .scaleEffect(configuration.isPressed ? 5 : 1)
 }
}

Upvotes: 2

Views: 225

Answers (1)

Asperi
Asperi

Reputation: 258375

The solution is to make background as part of a button style as shown below.

Tested with Xcode 11.4 / iOS 13.4

enter image description here

struct ScaleButtonStyle: ButtonStyle {
    let bgColor: Color
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .background(bgColor)
            .scaleEffect(configuration.isPressed ? 5 : 1)
    }
}

struct TestScaleButtonStyle: View {
    var body: some View {
        Button(action: { }) {
            Text("Button")
                .foregroundColor(.white)
        }.buttonStyle(ScaleButtonStyle(bgColor: Color.red))
    }
}

Upvotes: 3

Related Questions