Rectangle

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

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn SwiftUI on Codecademy

Contributors