9.7 C
New York
Tuesday, March 25, 2025

Take away default white background shade SwiftUI


So right here is the deal. I am making a button part that may have two kinds. One of many type has any backgroundColor outlined by the dev and the opposite type has no backgroundColor however does have a border. I’ve applied the type with the background shade however I’m attempting to arrange the type with out background shade and it at all times applies a default white shade that I can not do away with, making the border of the part not look proper.

Button with backgroundColor:

    var mainContentView: some View {
        HStack{
            if let leadingIcon = configuration.leadingIcon {
                imageView(useful resource: leadingIcon, shade: type.leadingIconColor, measurement: measurement.iconSize())
            }
            titleView
            if let trailingIcon = configuration.trailingIcon {
                imageView(useful resource: trailingIcon, shade: type.trailingIconColor, measurement: measurement.iconSize())
            }
        }
        .body(maxWidth: configuration.maxWidth ? .infinity : nil)
        .padding(.vertical, 8)
        .padding(.horizontal, 8)
        .background(Coloration.grey)
        .clipShape(
            .rect(
                topLeadingRadius: configuration.invertCornerRadius ? 5 : 15,
                bottomLeadingRadius: configuration.invertCornerRadius ? 15 : 5,
                bottomTrailingRadius: configuration.invertCornerRadius ? 5 : 15,
                topTrailingRadius: configuration.invertCornerRadius ? 15 : 5
            )
        )
    }

enter image description here

Button with out backgroundColor:

    var mainContentView: some View {
        HStack{
            if let leadingIcon = configuration.leadingIcon {
                imageView(useful resource: leadingIcon, shade: type.leadingIconColor, measurement: measurement.iconSize())
            }
            titleView
            if let trailingIcon = configuration.trailingIcon {
                imageView(useful resource: trailingIcon, shade: type.trailingIconColor, measurement: measurement.iconSize())
            }
        }
        .body(maxWidth: configuration.maxWidth ? .infinity : nil)
        .padding(.vertical, 8)
        .padding(.horizontal, 8)
        // .background(Coloration.clear) I've do this too
        .overlay(
            RoundedRectangle(cornerRadius: 0)
                .stroke(Coloration.purple, lineWidth: 2)
                .clipShape(
                    .rect(
                        topLeadingRadius: configuration.invertCornerRadius ? 5 : 15,
                        bottomLeadingRadius: configuration.invertCornerRadius ? 15 : 5,
                        bottomTrailingRadius: configuration.invertCornerRadius ? 5 : 15,
                        topTrailingRadius: configuration.invertCornerRadius ? 15 : 5
                    )
                )
        )
    }

enter image description here

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles