ZStack

struct · iOS 13.0+ · SDK 27.1

@frozen nonisolated struct ZStack<Content> where Content : View

A view that overlays its subviews, aligning them in both axes. The `ZStack` assigns each successive subview a higher z-axis value than the one before it, meaning later subviews appear "on top" of earlier ones. The following example creates a `ZStack` of 100 x 100 point ``Rectangle`` views filled with one of six colors, offsetting each successive subview by 10 points so they don't completely overlap: let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .purple] var body: some View { ZStack { ForEach(0..<colors.count) { Rectangle() .fill(colors[$0]) .frame(width: 100, height: 100) .offset(x: CGFloat($0) * 10.0, y: CGFloat($0) * 10.0) } } }  The `ZStack` uses an ``Alignment`` to set the x- and y-axis coordinates of each subview, defaulting to a ``Alignment/center`` alignment. In the following example, the `ZStack` uses a ``Alignment/bottomLeading`` alignment to lay out two subviews, a red 100 x 50 point rectangle below, and a blue 50 x 100 point rectangle on top. Because of the alignment value, both rectangles share a bottom-left corner with the `ZStack` (in locales where left is the leading side). var body: some View { ZStack(alignment: .bottomLeading) { Rectangle() .fill(Color.red) .frame(width: 100, height: 50) Rectangle() .fill(Color.blue) .frame(width:50, height: 100) } .border(Color.green, width: 1) }  > Note: If you need a version of this stack that conforms to the ``Layout`` protocol, like when you want to create a conditional layout using ``AnyLayout``, use ``ZStackLayout`` instead.

Members (0)

This type has no directly callable members in this snapshot. See the framework’s skipped declarations for unsupported APIs.

All SwiftUICore types →