Photo by Maxwell Nelson on Unsplash

SwiftUI is a declarative framework that helps you compose the user interface of your app. The principle building blocks that form the structure of a SwiftUI app are the App, Scene, and View protocols. In this article, you will learn how to use structs to create reusable components that conform to these protocols and make your code more modular and maintainable.

What are structs?

Structs are one of the basic types in Swift that let you model custom data and behavior. Structs are value types, which means they are copied when they are assigned to a variable or passed to a function. This makes them safer and more predictable than reference types, such as classes, which can be shared and mutated by multiple parts of your code.

Structs can define properties to store values, methods to provide functionality, subscripts to access their values using subscript syntax, initializers to set up their initial state, and extensions to add more functionality beyond their default implementation. Structs can also conform to protocols to provide standard functionality of a certain kind.

Why use structs for SwiftUI views?

SwiftUI uses structs for views because they are simple, fast, and expressive. Structs are simple because they have a clear and consistent syntax that makes them easy to read and write. Structs are fast because they avoid the overhead of reference counting and inheritance that classes have. Structs are expressive because they allow you to use property wrappers, such as @State and @Binding, to manage the state and data flow of your views.

Another reason why SwiftUI uses structs for views is that they enable a declarative style of programming. Declarative programming means that you describe what you want your user interface to look like, rather than how to create it. SwiftUI uses a diffing algorithm to compare your old and new views and update only the parts that have changed. This makes your code more concise and efficient.

How to create reusable components with structs?

To create reusable components with structs, you need to conform to one of the protocols that SwiftUI provides: App, Scene, or View. Depending on the protocol you choose, you will need to implement different requirements.

App protocol

The App protocol defines the entry point of your SwiftUI app. You need to apply the @main attribute to your struct that conforms to this protocol. You also need to implement a computed property called body that returns a Scene instance. A scene contains the view hierarchy that defines your app’s user interface.

For example, this is how you can create a simple app structure with a struct:

import SwiftUI

@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}

Scene protocol

The Scene protocol defines a logical unit of your app’s user interface. SwiftUI provides different types of scenes for different purposes, such as WindowGroup, DocumentGroup, or Settings. You can use scenes to display multiple windows or tabs on macOS and iPadOS, or handle document-based apps.

To create a custom scene with a struct, you need to implement a computed property called body that returns a View instance. A view is a piece of your app’s user interface that can display content or respond to user interactions.

For example, this is how you can create a custom scene with a struct:

import SwiftUI
struct MyScene: Scene {
var body: some View {
Text("Hello, world!")
}
}

View protocol

The View protocol defines the most basic component of your app’s user interface. A view can display content or respond to user interactions. You can compose multiple views together using modifiers or containers, such as VStack or HStack.

To create a custom view with a struct, you need to implement a computed property called body that returns some View. The some keyword indicates that the type of the view is opaque, meaning it doesn’t matter what specific type it is as long as it conforms to the View protocol.

For example, this is how you can create a custom view with a struct:

import SwiftUI
struct MyView: View {
var body: some View {
Text("Hello, world!")
.font(.largeTitle)
.foregroundColor(.blue)
}
}

Conclusion

In this article, you learned how to use structs to create reusable components in SwiftUI. You learned what structs are and why they are suitable for SwiftUI views. You also learned how to conform to the App, Scene, and View protocols and