How to hide the overflow of the background colour when adding corner radius in SwiftUI?

Question

I want to have a view with rounded corners and a custom background colour, but the latter overflows in the corners, as showed here:

This is my code:

    var id:Int
    var body: some View {
        VStack(alignment: .leading) {
            Text(name)
                .font(.title2)
                .bold()
                .foregroundColor(.accentColor)
            Text("Index numéro " + String(id))
                .foregroundColor(.accentColor.opacity(0.75))
        }
        .padding()
        .frame(width: UIScreen.width*0.9,
               height: UIScreen.height*0.1,
               alignment: .leading)
        .overlay(RoundedRectangle(cornerRadius: 20)
                    .stroke(Color.accentColor, lineWidth: 3))
        .background(Color.accentColor.opacity(0.1))
    }

Thanks in advance, I hope you guys will help me solve this issue!

Here is some info to fix your problem i guess https://stackoverflow.com/questions/56825294/swiftui-image-clipstobounds — ONDER GULER, Oct 19 '21 at 05:10

score 4 · Accepted Answer · answered Oct 18 '21 at 21:13

You can use a RoundedRectangle with strokeBorder and then a background of an additional RoundedRectangle with a fill modifier. This technique is detailed here: SwiftUI: How to draw filled and stroked shape?

var body: some View {
    VStack(alignment: .leading) {
        Text(name)
            .font(.title2)
            .bold()
            .foregroundColor(.accentColor)
        Text("Index numéro " + String(id))
            .foregroundColor(.accentColor.opacity(0.75))
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding()
    .background(
        RoundedRectangle(cornerRadius: 20)
            .strokeBorder(Color.accentColor, lineWidth: 3)
            .background(
                RoundedRectangle(cornerRadius: 20).fill(Color.accentColor.opacity(0.3))
            )
    )
    .padding()
}

Note: I've also changed your .frame modifier and replaced it with padding, which generally would be a more flexible solution that doesn't rely on measuring the screen size, but it's inconsequential to this answer

Thanks! I'll try this out. P.S.: thanks for the .frame modifier tip, I'm still a beginner with SwiftUI! — , Oct 21 '21 at 10:27

score 0 · Answer 2 · answered Oct 18 '21 at 21:40

0

Simply replace this code:

.background(Color.accentColor.opacity(0.1).cornerRadius(20.0))

answered Oct 18 '21 at 21:40

ios coder

1
4
31
91

score 0 · Answer 3 · answered Oct 19 '21 at 15:10

In iOS 15 there is a .background() modifier clipped to shape.

func background<S, T>(_ style: S, in shape: T, fillStyle: FillStyle = FillStyle()) -> some View where S : ShapeStyle, T : InsettableShape

Try this:

struct ContentView: View {

    var body: some View {
        VStack(alignment: .leading) {
            Text("name")
                .font(.title2)
                .bold()
                .foregroundColor(.accentColor)
            Text("Index numéro " + "1")
                .foregroundColor(.accentColor.opacity(0.75))
        }
        .padding()
        .frame(width: 200,
               height: 100,
               alignment: .leading)
        
        .overlay(RoundedRectangle(cornerRadius: 20)
                    .stroke(Color.accentColor, lineWidth: 3))
        .background(Color.accentColor.opacity(0.1), in: RoundedRectangle(cornerRadius: 20))
    }
}

How to hide the overflow of the background colour when adding corner radius in SwiftUI?

3 Answers3