RoundedRectangle

Question

Created Aug ’19

Replies 5

Boosts 0

Views 4.9k

Participants 4

Simple problem, I want a view that consists of a rounded rectangle with a red border and a clear fill. Here is some simple code. For sake of seeing the problem easier, I have removed the fill (and it appears the default fill is black).

import SwiftUI

struct ContentView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 30)
            .frame(width: 100, height: 100)
            .border(Color.red, width: 4)
    }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

Run this code, you'll see a black filled rounded rectangle bounded by a red border. However, the border is not rounded, it is a simple rectangle.

Is this a bug, or am I missing something?

Boost

Answer 1

KMT OP

Aug ’19

Did you try adjusting the border width? Try 6, as an example. Still no joy, you might need to use layers...

0

Answer 2

ole OP

Aug ’19

You have to use the stroke modifier. This produces a stroked rounded rect with no fill:

      RoundedRectangle(cornerRadius: 30)
        .stroke(Color.red, lineWidth: 4)
        .frame(width: 100, height: 100)

By the way, it seems you can't apply a fill and a stroke to the same shape simultaneously. So if you want a rounded rectangle with a fill color, you can create two rectangles (one for the fill and one for the stroke) and stack them on top of each other:

    ZStack {
      RoundedRectangle(cornerRadius: 30)
        .fill(Color.green)
      RoundedRectangle(cornerRadius: 30)
        .stroke(Color.red, lineWidth: 4)
    }
      .frame(width: 100, height: 100)

1

Answer 3

PRG OP

Aug ’19

I'm playing with this arrangment. Turns out I don't need two RoundedRectangle shapes. It seems by default the RoundedRectangle is not filled with any color, and hence it is essentially clear.

0

Answer 4

ole OP

Aug ’19

Yes. I just wanted to mention that combining stroke and fill is not as straightforward as one might think.

0

Answer 5

Planet30 OP

Jan ’21

Hi...

same problem here! Did you solve it? I used .fill with .border and the edges are not rounded, either:

Code Block 		RoundedRectangle(cornerRadius: 20.0, style: .circular )
							.frame(width: 50.0 , height: 50.0 )
							.border(Color.blue, width: 2 )
							.foregroundColor(Color.orange.opacity(0.2))

0