Structure¶
Rectangle¶
A rectangle shape.¶
Declaration¶
@frozen struct Rectangle : Shape
Overview¶
A Rectangle is a four-sided Shape with 90 degree angle corners that automatically aligns itself inside of the view containing it. By default, a Rectangle has black fill and takes up the space of it's container:
struct ContentView: View {
var body: some View {
Rectangle()
}
}

To define a Rectangle with a specific color and frame, use the fill(_:style:) and frame(width:height:alignment:) modifiers:
struct ExampleView: View {
var body: some View {
Rectangle()
.fill(Color.blue)
.frame(width: 250, height: 150)
}
}

To add a border, use the stroke(_:lineWidth:) modifier, and use the inset(by:) modifier to inset the rectangle by half of the border width to keep the rectangle at its original size:
struct ExampleView: View {
var body: some View {
Rectangle()
.inset(by: 10)
.stroke(Color.blue, lineWidth: 20)
.frame(width: 250, height: 150)
}
}

Availability¶
iOS 13.0+
macOS 10.15+
tvOS 13.0+
watchOS 6.0+
Topics¶
Type Alias¶
AnimatableData The type defining the data to animate.
Body The type of view representing the body of this view.
InsetShape The type of the inset shape.
Initializer¶
init() Creates a Rectangle that aligns itself inside of the view containing it by default.
Instance Method¶
inset(by:) Returns a Rectangle insetted by the amount specified.
path(in:) Used to describe a Rectangle as a path in a CGRect.