Learn

with Swift Accelerator

Learn

with Swift Accelerator

Components

Horizontal Stack

Last updated on 20 Oct 2024.

Written by Jia Chen.

Sample Project

Playgrounds on iPad

Playgrounds on Mac

Xcode

Components

Horizontal Stack

Last updated on 20 Oct 2024.

Written by Jia Chen.

Sample Project

Playgrounds on iPad

Playgrounds on Mac

Xcode

Components

Horizontal Stack

Last updated on 20 Oct 2024.

Written by Jia Chen.

Sample Project

Playgrounds on iPad

Playgrounds on Mac

Xcode

Scroll Down

Creating a Horizontal Stack

A HStack allows you to arrange subviews horizontally.

struct ContentView: View {
    var body: some View {
        HStack {
            Text("🍎")
            Text("🍌")
            Text("🍅")
        }
    }
}

Customizing Spacing

Use the spacing parameter to set a custom spacing between subviews of a HStack.

HStack(spacing: 32) {
    Text("🍎")
    Text("🍌")
    Text("🍅")
}

Customizing Alignment

By default, the HStack's alignment is set to the center. You can set the alignment of subviews in a HStack to top, center, or bottom.

HStack(alignment: .top) {
    Text("hello")
    Image(.globe)
    Text("world")
}

HStack(alignment: .center) {
    Text("hello")
    Image(.globe)
    Text("world")
}

HStack(alignment: .bottom) {
    Text("hello")
    Image(.globe)
    Text("world")
}

Combined with Vertical Stack

You can nest a HStack into a VStack and vice-versa as they are all views. This allows you to create more complex layouts.

HStack {
    VStack {
        Text("🍎")
        Text("🍌")
    }
    VStack {
        Text("🍋")
        Text("🍅")
    }
}

Components

Horizontal Stack

Components

Horizontal Stack

Components

Horizontal Stack

On this page

On this page

Creating a Horizontal Stack

Customizing Spacing

Customizing Alignment

Combined with Vertical Stack

See Also

Spacer

A flexible space that expands along a Stack view.

Vertical Stack

A VStack allows you to arrange subviews vertically.

Fitting & Filling Views

Views can behave in 2 ways, fitting or filling. This affects how they appear when laying out content.

SwiftUI Foundations

A collection of articles and examples on SwiftUI foundations.

Layout

A collection of articles and examples on SwiftUI Layout.