Lesson 5: SwiftUI HStacks, VStacks and ZStacks

Basic VStacks

VStack views are used to organize components vertically. 

 VStack{
           Text("Vertical Stack").font(.largeTitle)
           Image(systemName: "folder")
           Image(systemName: "calendar")
           Image(systemName: "trash")
        }

Setting VStack properties

VStacks can have their alignment and spacing set and you can also set padding and background color.

       VStack(alignment: .leading, spacing: 20){
          Text("Vertical Stack").font(.largeTitle)
          Image(systemName: "folder")
          Image(systemName: "calendar")
          Image(systemName: "trash")
       }.padding(30).background(Color.red)

Basic HStacks

HStacks are used to organize components horizontally.

       HStack{
           Text("Horizontal Stack").font(.largeTitle)
           Image(systemName: "folder")
           Image(systemName: "calendar")
           Image(systemName: "trash")
        }

Setting HStack Properties

HStack(alignment:.center, spacing: 20){
          Text("Horizontal Stack").font(.largeTitle)
          Image(systemName: "folder")
          Image(systemName: "calendar")
          Image(systemName: "trash")
       }.padding(30).background(Color.green)

Basic ZStacks

ZStacks are used to align components on top of each other along the Z-Axis.

Image Used
  ZStack{
          Image("steve")
          Text("Steve Jobs").foregroundColor(Color.red).bold()
       }

Setting ZStack Properties

You can set the alignment property as well as other basic view properties like padding and background color.

 ZStack(alignment: .top){
          Image("steve")
          Text("Steve Jobs").foregroundColor(Color.white).bold()
       }.padding(20).background(Color.black)