Using result builders for action sheets in SwiftUI
5 min read • ––– views
One of the key features of SwiftUI is a declarative syntax for layout. It is available thanks to result builders, previously called function builders. With result builders, we can implicitly build up a final value from a sequence of components. The final revision of this feature is released in Swift 5.4, and Xcode 12.5 suggests code completions and fix-its for it. I guess it's a good sign for exploring it and making action sheets more declarative!
Preparation
We'll create a simple SwiftUI app, where we can select ingredients for sandwich.
struct ContentView: View {
@State private var ingredients: [String] = []
@State private var isActionSheetPresented = false
var body: some View {
VStack {
Text(ingredients.joined())
.font(.system(.title))
Button("Make a sandwich") {
isActionSheetPresented = true
}
}
.padding()
.actionSheet(isPresented: $isActionSheetPresented) {
let buttons = [ActionSheet.Button.default(Text("🍞")) {
ingredients.append("🍞")
},
ActionSheet.Button.cancel()]
return ActionSheet(title: Text("Select an ingredient"), message: nil, buttons: buttons)
}
}
}When we tap on the button, ActionSheet is presented with buttons from the array in the initializer. The syntax for action buttons, especially with defined actions, looks a bit complicated. Let's improve it with a custom result builder.
Basics
We create a ButtonsBuilder struct with @resultBuilder attribute. To start using it, we must implement at least one static buildBlock function:
@resultBuilder
struct ButtonsBuilder {
static func buildBlock(_ components: ActionSheet.Button...) -> [ActionSheet.Button] {
components
}
}Here we have a variadic parameter with ActionSheet.Button and just return it as is.
Because ActionSheet knows nothing about our builder, we create a new initializer with title, message, and the builder:
extension ActionSheet {
init(title: Text, message: Text? = nil, @ButtonsBuilder buttons: () -> [ActionSheet.Button]) {
self.init(title: title, message: message, buttons: buttons())
}
}Now we're ready to refactor ActionSheet configuration:
.actionSheet(isPresented: $isActionSheetPresented) {
ActionSheet(title: Text("Select an ingredient"), message: nil) {
ActionSheet.Button.default(Text("🍞")) {
ingredients.append("🍞")
}
ActionSheet.Button.cancel()
}
}Looks great!
What if?.. Working with conditions
Result builders may build a partial result depending on some conditions. In our app, we add a new State and Toggle. If it is enabled, we add cucumbers and tomatoes otherwise.
// In States section
@State private var likeCucumbers = true
// Below Text in ContentView
Toggle("I love cucumbers", isOn: $likeCucumbers)To support if-else conditions in our builder, we must implement buildEither(first:) and buildEither(second:) functions:
@resultBuilder
struct ButtonsBuilder {
...
static func buildEither(first components: [ActionSheet.Button]) -> [ActionSheet.Button] {
components
}
static func buildEither(second components: [ActionSheet.Button]) -> [ActionSheet.Button] {
components
}
}If we try to add if-else statement like this:
if likeCucumbers {
ActionSheet.Button.default(Text("🥒")) {
ingredients.append("🥒")
}
}
else {
ActionSheet.Button.default(Text("🍅")) {
ingredients.append("🍅")
}
}We have an error:
Cannot pass array of type '[ActionSheet.Button]' (aka 'Array<Alert.Button>') as variadic arguments of type 'ActionSheet.Button' (aka 'Alert.Button')
We can solve the error by defining a new protocol and implementing it by both a single ActionSheet.Button and a collection of ButtonsConvertible:
protocol ButtonsConvertible {
var buttons: [ActionSheet.Button] { get }
}
extension ActionSheet.Button: ButtonsConvertible {
var buttons: [ActionSheet.Button] {
[self]
}
}
extension Array: ButtonsConvertible where Element == ButtonsConvertible {
var buttons: [ActionSheet.Button] { self.flatMap(\.buttons) }
}In ButtonsBuilder we replace all ActionSheet.Button with ButtonsConvertible. And finally, we implement buildFinalResult function that gets all ButtonsConvertible and maps it to buttons:
@resultBuilder
struct ButtonsBuilder {
static func buildBlock(_ components: ButtonsConvertible...) -> [ButtonsConvertible] {
components
}
...
static func buildFinalResult(_ components: [ButtonsConvertible]) -> [ActionSheet.Button] {
components.flatMap(\.buttons)
}
}Now likeCucumbers check builds successfully.
Using ForEach for Actions
SwiftUI has an awesome ForEach element. It gets different data collections and converts them to views via @ViewBuilder. I was wondering if there is any chance to use it for buttons 🤔. Of course, let's start with an extension:
extension ForEach: ButtonsConvertible where Content == ActionSheet.Button {
var buttons: [ActionSheet.Button] {
data.map(content)
}
}Here we declare that Content generic must be ActionSheet.Button and map data to buttons via content closure.
ActionSheet.Button is a simple typealias for Alert.Button, and Alert.Button is just a struct that doesn't conform View protocol. To solve it, we implement it and return Never for the body:
extension ActionSheet.Button: View {
public var body: Never {
fatalError()
}
}Because we don't use ForEach for rendering, the body will never be called. And it works now!
ForEach(["🧅", "🧄"], id: \.self) { string in
ActionSheet.Button.default(Text(string)) {
ingredients.append(string)
}
}We can explicitly add ids like in the example, use Identifiable array or even ranges inside ForEach. The downside of this trick is that we can accidentally use ActionSheet.Button inside any body and get fatalError in runtime.
Conclusion
Result builder is a great enhancement in Swift language. In certain cases, it improves code readability dramatically. If you want to play with the example, check ResultBuilderExample repo.
Thanks for reading 🙏