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.

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)
