Playing with SwiftUI Part-3

Published in

codeburst

2 min readJun 24, 2019

In Intro to SwiftUI, we discussed the declarative UI programming style.

In Part 1, we have seen what we can do with Text, Button and Image using SwiftUI.

In Part 2 - Playing with TextField, SegmentControl,Toggle and Slider, Stepper in SwiftUI.

In this article we will be covering Containers like VStack, HStack and ZStack view ʘ‿ʘ

In SwiftUI content that to be represented is the type of view. The View protocol has a property named body intention only to return a single view.

Which indicates to combine various views you require a container of the type of view.

SwiftUI has Stacks, which come in three forms:
🗃️ HStack: Container to stack views in horizontal line

🗃️ VStack: Container to stack views in vertical line

🗃️ ZStack: Container to stack views overlapping each other or align them to any line

Let’s go and try to understand each one of them,

🖇️ VStack

A view that arranges its children in a vertical line.

☞ To show a simple VStack

We can decide the alignment and the spacing between the view contained by the Container as shown below.

VStack(alignment: .leading, spacing: 10)

☞ To show a simple VStack with Divider

A view that arranges its children in a horizontal line.

☞ To show a simple HStack

☞ To show a simple HStack with Divider

A view that overlays its children, aligning them in both axes.

Hope it will give glims of what you can make with SwiftUI…