Swift Result Builder: Building Declarative StackView
Result builder is a new feature from Swift 5.5 that we can used to create declarative view.
If you have ever used to build iOS applications using SwiftUI, you must be familiar with a new paradigm, namely declarative UI. Declarative UI has several advantages including being simpler, the state of the UI is more predictable, and the code is single source of truth. But have you ever been curious about the technology behind making declarative views in SwiftUI such as HStack and VStack?
Yes, this technology takes advantage of a new feature from Swift 5.5 called Result Builder. Maybe you will know this result builder which was originally a function builder introduced in Swift 5.1. Then knowing that we can use this technology, how can we use it to create our own declarative views without waiting for SwiftUI to be used in our daily work? Be happy today because I will discuss it in this article. :]
Here’s an example of a simple implementation for creating a result builder:
In implementing the result builder, much like other features like property wrapper, we need to use a special annotation that is @resultBuilder. The result builder has many built-in functions and each has its own capabilities. The above example is a simple build function where we can pass multiple UIView using variadic arguments and then build them into one array of UIView. Let’s see how we implement this result builder to create a declarative stack view.
For example we can create a class called VStack which inherits from UIStackView and distributes its child views vertically. Notice how we take advantage of the result builder we created earlier called StackBuilder. In the initializer, right before the argument name, we can insert @StackBuilder which means we will pass the UIView into VStack using the StackBuilder we created. To make it more declarative, we can create a simple styling protocol to provide a chaining function that we can use on the Stack component we created.
In the StackModifier protocol, we use an associated type which inherits from UIStackView. Why we do this? because later we also need to create a stack component for the horizontal one and it will conform to the protocol as well.
From here, we can create a declarative stack view like this:
By creating a declarative stack view like the example above, it can help us as iOS developers to use UIStackView easily and simply. Let’s create a new component for HStack:
We already have all the stack components both vertical and horizontal. Pretty easy isn’t it? :]
To be more declarative, let’s create a simple protocol to provide chaining functions on UIView as follows:
Then our final implementation would be like this:
Where to go from here
Congratulations, you already have some fundamental knowledge of the result builder in Swift. Then you can explore more about other functionality in the result builder such as being able to implement conditional statements in the builder function. Clap if you like this article, thank you and see you in the next article :].
