@Seneca Global IT Services

SwiftUI-Container View’s hierarchy

Hi Every one 😀, i am back with another article. Without wasting time , lets get in to this. I will try to minimise this topic as much possible.

If you would like to read my last article click here

Why SwiftUI has no ViewController?

Getting started …🚀

We know UIKit has UIView , it plays a crucial role in that framework. Like so , we also have Views in SwiftUI and they serve primary role as they do in UIKit.

What is a View ?

A View defines a piece of UI . That’s it …! its just a piece of UI.

In SwiftUI the main UI element is a View. I would like to bring it to your notice how this SwiftUI Combine and render the View and It’s Subviews hierarchy.

Lets see the default template of SwiftUI with it’s ContentView..!

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

There is ContentView of type Struct that is confirming with View Protocol. Here you may get a doubt 🤔 why SwiftUI View is a protocol instead a Class reference type , that i will update in my next Article. For now consider it is a protocol.

In SwiftUI We have few list of containers called ZStack , VStack , HStack , List, ScrollView and ForEach etc ..

Let’s see some hierarchal level syntax that how the ContainerView (Like StackView , VStack, etc) is defined , ContainerViews are declared as a composition of other Views serving as their content.

#figure 1 Container syntax

Let see some example with better explanation ,

VStack {
    Text("Hello")
    Text("World")
}

HStack {
    Text("Hello")
    Text("World")
}

ForEach(0..<5) { index in
    Text("Item \(index)")
}

Those Content Views are declared with in a special kind of closer know as a View builder.

View builders allow us to write declarative code in the body of the closure. Instead of calling a function like adding subviews , we can just list out our content within the closure.

lets check built-in API for that how the containers passed as Content to the ViewBuilder (lets take VStack Container)

 public struct VStack<Content> : View where Content : View {

    public init(alignment: HorizontalAlignment = .center, 
                             spacing: CGFloat? = nil,
                @ViewBuilder content: () -> Content)

   
}

in the above snippet , you can see the Content parameter defined as a closer , but marked with @ViewBuilder, attribute. The swift Compilers knows how to translate a closer marked by this attribute in to a new closer that returns a single view representing all of it’s contents with in our stack.

That’s it , in the next article i will write , Why View is a protocol type in swiftUI instead a Class Reference type like in UIKit.. !

Note: This is the basic theory that we must know before going to play with SwiftUI. In fact it’s my habit to know the roots of the any language. If anyone has same habit , definitely they will like this article 🤗. Few other may have to struggle to understand this article 🥶. But trust me it’s very useful to know when we are writing each word in the syntax. Soon i will come up with more interesting topics.

Thanks for your time to read this article …!

Shaik Vali Babu

E-Mail : skvalibabu@gmail.com

Module lead in IOS App Development @Seneca_Global_IT_Services