How it works
ZStackContent3D is the result-builder content type that a depth-aware ZStack collects its children into. Where a plain ZStack overlaps views in a flat front-to-back order, the 3D variant arranges them along a true z-axis so each layer occupies its own position in space. Reach for it when you need stacked content to read as genuinely layered depth rather than as one image painted over another, and let SwiftUI compose the children you declare into a single 3D arrangement.
Declare children inside the stacking closure
Everything you write in the trailing closure of the stack becomes ZStackContent3D, gathered by a result builder so each statement is one layer. The three views here, the
RoundedRectangle(cornerRadius: 16), the insetRoundedRectangle(cornerRadius: 12), and theText("Layered")badge, are the layers it collects, ordered from back to front.Position the layers with the alignment guide
The stack's
alignmentparameter sets where the collected content lines up within the stacking frame. Passing.bottomTrailingpins every layer to the same bottom-trailing corner, so the smaller white card and theCapsule()-backed label anchor against that edge of the blue gradient rectangle.Size each layer independently
Because the content is a builder of distinct views rather than a single drawing, each layer keeps its own geometry. The
.frame(width: 200, height: 140)on the base shape and the.frame(width: 150, height: 90)on the inset shape give the layers different footprints while they share the stack's anchor.Apply modifiers to the assembled stack
Modifiers placed after the closure act on the whole collected arrangement, not the individual layers. The trailing
.padding()insets the entire stack of layers as one unit once ZStackContent3D has been composed.
alignment: .bottomTrailing to alignment: .topLeading and watch every layer re-anchor to the opposite corner, exposing how the alignment guide governs the whole collected content.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct ZStackContent3DDemo: View {
var body: some View {
ZStack(alignment: .bottomTrailing) {
RoundedRectangle(cornerRadius: 16)
.fill(.blue.gradient)
.frame(width: 200, height: 140)
RoundedRectangle(cornerRadius: 12)
.fill(.white.opacity(0.9))
.frame(width: 150, height: 90)
Text("Layered")
.font(.headline)
.padding(8)
.background(.yellow, in: Capsule())
}
.padding()
}
}