SwiftUI ViewBuilder: Organize your views

ViewBuilders in SwiftUI are an excellent way to keep your code clean and organized. They make your code easier to read and maintain by allowing you to structure your views more clearly. This simplifies the process of building complex user interfaces, ensuring that your code remains elegant and efficient. Embracing ViewBuilders enhances both the readability and manageability of your SwiftUI projects.

What is a ViewBuilder in SwiftUI?

ViewBuilder is just an attribute in SwiftUI you can use to help organize your views.

ViewBuilder is a great tool to organize your views. When developing an application it’s quite easy to create large views that do a lot different stuff. The problem is that the view can get so large that it’s hard to read, making the development time even longer. This is where using ViewBuilder is amazing — because it helps you organize your SwiftUI views.

ViewBuilder example

In the following example, I have created the most basic example of how you can use ViewBuilders.

We will create a ViewBuilder that simply shows a text element:

import SwiftUI

struct ViewBuilderView: View {
    var body: some View {
        viewBuilderExample()
    }
    
    @ViewBuilder
    func viewBuilderExample() -> some View {
        Text("Hello from ViewBuilder")
    }
}

The result:

Split up view in ViewBuilders

As stated ViewBuilder can help you organize your views. To show a bit more complex example (nothing too crazy), I have made a Form with some different settings you can edit and a section that displays a list. In the first part of this example we can see how it looks without using ViewBuilders:

import SwiftUI

struct ViewBuilderView: View {
    @State var isToggleOn: Bool = false
    @State var listToShow: [String] = ["Kade Turner", "Ariella Briggs", "Kensley Carroll"]
    @State var fullNameTxt: String = ""
    @State var age: Int = 18
    
    var body: some View {
        VStack {
            Text("VIEW BUILDER EXAMPLE")
                .font(.title)
                .bold()
            
            Form {
                Section("BASIC") {
                    TextField("Full name", text: $fullNameTxt)
                    
                    Toggle(isOn: $isToggleOn, label: {
                        Text("Dark mode")
                    })
                    
                    Stepper("Age: \(age)", value: $age)
                }
                
                Section("USERS") {
                    ForEach(listToShow, id: \.self) { item in
                        Text(item)
                    }
                }
                
            }
        }

    }
}

Now it’s time to split the view into ViewBuilders. I think it’s a good idea to take every section and create a ViewBuilder. Because there can be many sections and therefore can get quite complex to read, and it feels like a natural place to split the view:

import SwiftUI

struct ViewBuilderView: View {
    @State var isToggleOn: Bool = false
    @State var listToShow: [String] = ["Kade Turner", "Ariella Briggs", "Kensley Carroll"]
    @State var fullNameTxt: String = ""
    @State var age: Int = 18
    
    var body: some View {
        VStack {
            Text("VIEW BUILDER EXAMPLE")
                .font(.title)
                .bold()
            
            Form {
                Section("BASIC") {
                    basicSection()
                }
                
                Section("USERS") {
                    usersSection()
                }
                
            }
        }
    }
    
    @ViewBuilder
    func basicSection() -> some View {
        TextField("Full name", text: $fullNameTxt)
        
        Toggle(isOn: $isToggleOn, label: {
            Text("Dark mode")
        })
        
        Stepper("Age: \(age)", value: $age)
    }
    
    @ViewBuilder
    func usersSection() -> some View {
        ForEach(listToShow, id: \.self) { item in
            Text(item)
        }
    }
}

 Is @ViewBuilder necessary?

The short answer is no, but it’s a great idea to consider using them because it just makes your life a bit easier.

When you are using ViewBuilder you can easily split up your SwiftUI views inside the same class thereby making it easier for you to keep an overview.

Wrap up SwiftUI ViewBuilder

Using ViewBuilder when building a SwiftUI application is a great way for building efficient and clean user interfaces. It allows you to develop complex views effortlessly while maintaining readability and reducing boilerplate code. 

Happy coding 🙂

Scroll to Top