SwiftUI - Advanced Components Part 1

We have previously discussed SwiftUI basic components. In this article, we will be looking at some complex components offered by SwiftUI that will help you build your application easily.

Stacks

SwiftUI makes it very easy for users to create interfaces with stacks. These components essentially arrange their child components on either the X, Y, or the Z-axis.

  • HStack: A container that arranges its children in the X-Axis or the horizontal direction.
  • VStack: A container that arranges its children in the Y-Axis or the vertical direction.
  • ZStack: A container that arranges its children in the Z-Axis. This is helpful for managing the background color of a view, overlays that need to appear on top of other content, etc.

Stacks accept view modifiers to style their child components. Elements can be arranged in different nested stacks to create complex UIs.

VStack{

    Text("HStack")

    HStack{
        Text("Text 1")
            .bold()
            .foregroundColor(.blue)
        Text("Text 2")
            .italic()
            .foregroundColor(.red)
        Text("Text 3")
            .strikethrough()
            .foregroundColor(.yellow)
    }

    Divider()

    Text("VStack")

    VStack{
        Text("Text 1")
            .bold()
            .foregroundColor(.blue)
        Text("Text 2")
            .italic()
            .foregroundColor(.red)
        Text("Text 3")
            .strikethrough()
            .foregroundColor(.yellow)
    }
    
    Divider()

    Text("ZStack")

    ZStack{
        Text("Text 1")
            .bold()
            .foregroundColor(.blue)
        Text("Text 2")
            .italic()
            .foregroundColor(.red)
        Text("Text 3")
            .strikethrough()
            .foregroundColor(.yellow)
    }
    
}.padding()


List

As the name suggests, a list is a group of data presented in a single column in Swift UI. The items rendered in a list are not limited to only one type, a list can render data in all sorts of primitive views and custom views. Lists also support sections which is a massive help in organizing data in large lists.

HStack{
    VStack{
        List {
            Text("I am a list item")
        }

        List {
            Text("I am a mixed list")
            Image(systemName: "clock.fill")
        }
    }
    VStack{

        List {
            ForEach((1...5), id: \.self) {
                Text("I am item \($0)")
            }
        }

        List {
            Section(
                header: Text("Animals"), 
                footer: Text("Dogs are my fav")) {
                    Text("Dogs")
                    Text("Cats")
            }

            Section(header: Text("Food")) {
                Text("Pizza")
                Text("Burger")
            }
        }
    }
}


ScrollView

A view that allows it's children components to be viewed via scrolling. This is a component that is of prime importance while making user interfaces as it does not restrict the usable area of the content to the device's screen size.

ScrollView {
    VStack {
        ForEach(0..<50) { i in
            Text("I am item number \(i)").padding()
        }
    }.frame(maxWidth: .infinity)
}

----------------------------------------------

ScrollView(.horizontal) {
    HStack {
        ForEach(0..<50) { i in
            Text("I am item number \(i)").padding()
        }
    }.frame(maxHeight: .infinity)
}

https://blog-assets.plgworks.com/blog/images/2022/07/ezgif.com-gif-maker--1-.gif

https://blog-assets.plgworks.com/blog/images/2022/07/ezgif.com-gif-maker--2-.gif


Img1 Img2

In this article, we have discussed some of the essential components of SwfitUI that will help you design your next app's user interface. We will be discussing some more components from Swift UI in the upcoming part of this series.

Stay tuned!

Harsh Siriah

Harsh Siriah

Hi, I'm Harsh! A geek with a love for dogs & mobiles.
Pune, India