Remove circular button background in SwiftUI (WatchKit)

user_1254211 0
Viewed 2999

I'm struggling to remove the background of a custom circular Button element in SwiftUI which is defined as follows:

struct NavButton: View {
    var body: some View {
        Button(action: {})
            VStack {
                Text("Button")
            }
            .padding(40)
            .background(Color.red)
            .font(.title)
            .mask(Circle())
        }
    }
}

This results in a rectangular light gray background around the button, where I want it to not be shown:

enter image description here

I tried to append a "background" modifier to the button, and it demonstrates very strange behavior: if it's set to "Color.clear", there is no effect. But if I set it to "Color.green" it does change the background as expected.

Example of setting the "Background" modifier to "Color.green":

struct NavButton: View {
        var body: some View {
            Button(action: {})
                VStack {
                    Text("Button")
                }
                .padding(40)
                .background(Color.red)
                .font(.title)
                .mask(Circle())
            }
            .background(Color.green) // has no effect if set to "Color.clear"
        }
    }

enter image description here

I wonder if I'm missing something here?

PS: I'm using Xcode 11.1 (11A1027)

watchkit swiftui swift ios
4 Answers

Try adding .buttonStyle(PlainButtonStyle()) on the button itself.

You would have something like this:

    Button(action: {}){
        VStack{
            Text("Button")
        }
        .padding(40)
        .background(Color.red)
        .font(.headline)
        .mask(Circle())  
    }
    .buttonStyle(PlainButtonStyle())
user_52735940

Declare your own ButtonStyle:

struct RedRoundButton: ButtonStyle {

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(40)
            .font(.title)
            .background( Circle()
                .fill(Color.red))
    }

}

and then use it like this:

Button("Button") {}
    .buttonStyle(RedRoundButton())
user_79483720

Try this:

struct ContentView: View {
    var body: some View {
        Button(action: {}) {
            Text("Button")
            .frame(width: 80, height: 80)
        }
        .background(Color.red)
        .cornerRadius(40)
        .frame(width: 80, height: 80)
    }
}

Circle button

user_30832490

Try this.

struct ContentView: View {
    var body: some View {
        VStack {
                Button(action: {}){
                    Text("button")
                        .font(.system(size: 50))
                        .foregroundColor(.black)
                        .bold()
                    
                }
                        .padding(30)
                        .background(Color.yellow)
                        .font(.headline)
                        .mask(Circle())
                        .buttonStyle(PlainButtonStyle())
        } // end Vstack
         
    }// end body
}
user_172979000
Related