# #1 Learning swift UI

In this first lesson on the in swift UI first things that we are going to discuss about is how to create the foundation of any screen in your application.

1. VStack
    
2. HStack
    
3. ZStack
    

Let's discuss about VStack first.

## VStack

VStack stands for Vertical Stack. It helps us to create vertically aligned UI. Something like this.

```swift
VStack {
    Text("Hello, SwiftUI!")
    Button("Tap me") {
        // Button action
    }
    // Add more views as needed
}
.padding()
```

Here if you run the above code in xcode. You will see both the component aligned in on after other in column. Something like this.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709403012534/e0c7645b-9950-44e1-8a28-42d0379d9d8e.png align="center")

We can also update the alignment of the Vstack applying these properties.

```swift
VStack(alignment: .leading, spacing: 10) {
    Text("Title")
        .font(.title)
    Text("Subtitle")
        .font(.subheadline)
}
.padding()
.background(Color.gray)
.cornerRadius(10)
.padding()
```

## HStack

Similar to Vstack we have Hstack. Which help in horizontal alignment of UI element.

```swift
HStack {
    Text("Left")
    Spacer()
    Button("Tap Me"){}
    Spacer()
    Text("Right")
}
.padding()
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709403460415/500c7cbb-09e5-4140-850b-6ef02a7ad41c.png align="center")

Other alignment properties can also be passed similar to the VStack.

```swift
HStack {
    // Views
}
.background(Color.gray)
.cornerRadius(10)
.padding()
```

## ZStack

There is one more which is called ZStack. It help you to add UI element in Z-axis.

Here is an example:

```swift
ZStack {
    Image("backgroundImage")
    Text("Hello, SwiftUI!")
        .font(.largeTitle)
        .foregroundColor(.white)
}
.padding()
```

Here if you run the above code using correct image. You will able to see that Text Ui element is above the background Image.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709404010373/d1f3d9e9-ce64-4c4e-89c2-bcd2591c99f6.png align="center")