SwiftUI – Stack

Stack

Stack is placeholder and kind of layout wrapper.

If you are an Android Engineer, LinearLayout and FrameLayout is similar concept

Example

This is sample codes

StackView.swift

import SwiftUI

struct StackView: View {
    var body: some View {
        VStack {
            VStack(alignment: .trailing) {
                Text"Hello, World!)
                    .font(.largeTitle)
                    .foregroundColor(Color.red)
            }
            HStack {
                VStack(alignment: .center) {
                    Text("Vstack - HStack - VStack")
                }
            }.padding()
            ZStack {
              Text("VStack - ZStack")
              Text("VStack - ZStack 2")
            }.frame(width: 200.0, height: 300)
            Spacer()
        }
        
    }
}

struct StackView_Previews: PreviewProvider {
    static var previews: some View {
        StackView()
    }
}

Preview

VStack	Vertical align element
HStack	Horizontal align element
ZStack	Z-Index alignment

Explanation

Each stack has at least one element. In this example, Text

VStack align element from top to bottom

Stack may have frame size (width and height)

Space() is fill space

And each stack property can be edited by XCode property