SOLVED: Unable to correctly format the background color of a view

@flaneur7508

Mar '23

Hi Experts!

I have a view, example below. I simply want to color the background by as you can see in the linked screenshot the background fill is not taking inti accout the rounbded corners of the border. I can't figure out how to fix this. Any advise , greatly welcomed!

https://imgur.com/a/A2jsrAd

                     VStack {
                            Text("\(ap.Percent[0], specifier: "%.0f")%")
                                .frame(maxWidth: .infinity, alignment: .center)
                                .fontWeight(.semibold)
                                .foregroundColor(Color.myBlue)
                                .font(.system(size: 40, weight: .heavy, design: .rounded))
                            Text("HI HWS!")
                                .font(.system(size: 13, weight: .light, design: .rounded))
                                .multilineTextAlignment(.center)
                        }
                        .background(Color.gray)
                        //.padding()
                        .overlay(
                            RoundedRectangle(cornerRadius: 16)
                                .stroke(Color.myPurple, lineWidth: 2)
                        )

1

@NigelGee HWS+

Mar '23

put the background after the .overlay

1

@flaneur7508

Mar '23

That just gives me a grey box, content is not visable, and still not respecting the rounded corners of the view.

1

@Hectorcrdna

Mar '23

Hi, For the background fill to take into account the rounded corners you could add a clipshape at the end.

.clipShape(RoundedRectangle(cornerRadius: 16))

1

Archived topic