Rectangle

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Oct 24, 2022
Contribute to Docs

The Rectangle view is a pre-built rectangular shape that is aligned inside the frame of the View containing it, and can be visually modified as desired.

SwiftUI has several built-in shapes, such as a rectangle, circle, and capsule. The color and placement of each shape can be modified as needed.

Syntax

var body: some View {
  Rectangle()
}

Example

It can be changed to the desired shape by attaching a modifier to the Rectangle.

var body: some View {
Rectangle()
.fill(Color.green)
.frame(width: 100, height: 100)
.padding(20)
.background(Color.yellow)
.cornerRadius(10.0)
}

Order matters here; there is a yellow rectangle with a border width of 20 points and rounded corners of 10.0 points. Above, there’s a green rectangle that’s 100 points in length and 100 points in width.

This will display the following:

ZStack

All contributors

Looking to contribute?

Learn SwiftUI on Codecademy