跳转至
Structure

HStack

A view that arranges children horizontally.

Declaration

@frozen struct HStack<Content> : View where Content : View

Overview

HStack is a horizontal stack of views. Unlike LazyHStack, which only renders the views when your app needs to display them onscreen, an HStack renders the views all at once, regardless of whether they are on or offscreen. Use the regular HStack when you have a small number of child views or don't want the delayed rendering behavior of the "lazy" version.

struct ExampleView: View {
    var body: some View {
        HStack {
            Text("🍌🍌")
            Text("🍏🍏")
            Text("🍑🍑")
        }
    }
}
A view displaying an HStack composed of three text components, "🍌🍌", "🍏🍏", and "🍑🍑".

Modify your stack's alignment or spacing with the built in initializer.

struct ExampleView: View {
    var body: some View {
        HStack(alignment: .top, spacing: 32) {
            Text("🍌🍌")
            Text("🍏🍏")
            Text("🍑🍑")
        }
    }
}
A view displaying an HStack composed of three text components, "🍌🍌", "🍏🍏", and "🍑🍑", with spacing between them and top alignment.

Learn more about the properties of each alignment choice via the VerticalAlignment struct.

HStack uses a ViewBuilder to construct the content.

Availability

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics


Initializer

init(alignment:spacing:content:) Creates a horizontal stack with the given spacing and vertical alignment.


Type Alias

Body The type of view representing the body of this view.