Using SwiftUI's built-in shapes

SwiftUI provides six different basic shapes:

• Rectangle
• RoundedRectangle
• UnevenRoundedRectangle
• Capsule
• Circle
• Ellipse

They can be used to create more complex shapes if we combine them.In this recipe, we'll explore how to create them, add a border and a fill, and how to lay out the shapes.There will be more than what we can show here, but with this recipe as a starting point, you can modify the built-in shapes to discover their potential in SwiftUI.

Getting ready

As usual, start by creating a new SwiftUI project with Xcode, and call it BuiltInShapes.

How to do it…

We are going to implement a simple app that shows the different basic shapes laid out vertically:

1. Create a VStack component with a spacing of 10 and a horizontal padding of 20:

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
        }
        .padding(.horizontal, 20)
    }
}

1. Add the shapes inside the stack:

VStack(spacing: 10) {
...