Complex Layouts With Stack Views Examples

hstack-example

var body: some View {
  VStack(spacing: 10) {
    Text("HStack")
      .font(.title)

    Text("Spacing & Alignment")
      .font(.subheadline)

    HStack {
      Circle()
        .fill(.blue)
        .frame(width: 100, height: 100)

      Rectangle()
        .fill(.yellow)
        .frame(width: 100, height: 100)

      Capsule()
        .fill(.orange)
        .frame(width: 100, height: 50)
    }
  }
}

stack-definition-example

VStack(alignment: .trailing) { ... }
HStack(alignment: .bottom) { ... }
ZStack(alignment: .top) { ... }

stack-example

var body: some View {
  VStack {
    Text("Contact example")
      .font(.title)
    Spacer()

    VStack {
      ZStack {
        Circle()
          .fill(.orange)
          .frame(width: 150, height: 150)

        Text("JD")
          .foregroundColor(.white)
          .font(.system(size: 75, weight: .bold))
      }

      VStack(spacing: 20) {
        VStack {
          Text("John Doe")
            .font(.title)
          Text("SwiftUI Engineer")
            .font(.subheadline)
        }

        HStack {
          Button(action: {}) {
            VStack {
              Image(systemName: "message")
              Text("message")
            }
          }
          .frame(minWidth: 70)
          .padding()
          .foregroundColor(.white)
          .background(.blue)
          .cornerRadius(8)

          Button(action: {}) {
            VStack {
              Image(systemName: "phone")
              Text("call")
            }
          }
          .frame(minWidth: 70)
          .padding()
          .foregroundColor(.white)
          .background(.blue)
          .cornerRadius(8)
        }
      }
    }
    Spacer()
    Spacer()
  }
}

vstack-example

var body: some View {
  VStack(spacing: 10) {
    Text("VStack")
      .font(.title)

    Text("Spacing & Alignment")
      .font(.subheadline)

    VStack {
      Text("Hello World!")
        .frame(maxWidth: .infinity)
        .foregroundColor(.white)
        .background(.orange)

      Circle()
        .fill(.blue)
        .frame(width: 100, height: 100)

      Rectangle()
        .fill(.yellow)
        .frame(width: 100, height: 100)
    }
  }
}

zstack-example

var body: some View {
  VStack {
    Text("ZStack")
      .font(.title)

    Text("Layering & Alignment")
      .font(.subheadline)

    ZStack {
      Circle()
        .fill(.blue)
        .frame(width: 200, height: 200)

      Capsule()
        .fill(Color.white.opacity(0.5))
        .frame(width: 190, height: 50)

      Text("Hello World!")
        .foregroundColor(.white)
    }
  }
}