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:
- 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)
}
}- Add the shapes inside the stack:
VStack(spacing: 10) {
...