{"id":2284,"date":"2025-01-12T07:15:24","date_gmt":"2025-01-12T12:15:24","guid":{"rendered":"https:\/\/stepinto.vision\/?p=2284"},"modified":"2025-01-12T07:15:24","modified_gmt":"2025-01-12T12:15:24","slug":"spatial-swiftui-zstack","status":"publish","type":"post","link":"https:\/\/stepinto.vision\/example-code\/spatial-swiftui-zstack\/","title":{"rendered":"Spatial SwiftUI: ZStack"},"content":{"rendered":"\n

ZStack is a core container view in SwiftUI, but it really shines in visionOS where depth is real.<\/p>\n\n\n\n

The use cases for ZStack are too numerous to cover, so let’s just focus on three simple examples.<\/p>\n\n\n\n

Space views evenly in the ZStack<\/h2>\n\n\n\n

Spacing is controlled by the parent ZStack. Each child view has a depth of 0. The stack adds space between them to create a 3D effect. <\/p>\n\n\n\n

<\/path><\/path><\/svg><\/span>
ZStack<\/span>(<\/span>spacing<\/span>: spacing \/ <\/span>3<\/span>) {<\/span><\/span>\n    <\/span>RoundedRectangle<\/span>(<\/span>cornerRadius<\/span>: <\/span>12.0<\/span>)<\/span><\/span>\n        .<\/span>foregroundStyle<\/span>(.<\/span>stepRed<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>200<\/span>, <\/span>height<\/span>: <\/span>200<\/span>)<\/span><\/span>\n<\/span>\n    <\/span>RoundedRectangle<\/span>(<\/span>cornerRadius<\/span>: <\/span>12.0<\/span>)<\/span><\/span>\n        .<\/span>foregroundStyle<\/span>(.<\/span>stepGreen<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>150<\/span>, <\/span>height<\/span>: <\/span>150<\/span>)<\/span><\/span>\n<\/span>\n    <\/span>RoundedRectangle<\/span>(<\/span>cornerRadius<\/span>: <\/span>12.0<\/span>)<\/span><\/span>\n        .<\/span>foregroundStyle<\/span>(.<\/span>stepBlue<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>100<\/span>, <\/span>height<\/span>: <\/span>100<\/span>)<\/span><\/span>\n}<\/span><\/span>\n.<\/span>frame<\/span>(<\/span>depth<\/span>: spacing)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Use Spacers to fill all available space in the ZStack<\/h2>\n\n\n\n
We can push our first view to the back with a spacer. Then do the same thing with the last view. Adding two spaces between three views will result in a simple layout. <\/p>\n\n\n\n
    \n
  • Back: first view is placed at a depth of 0<\/li>\n\n\n\n
  • Center: second view is placed at the halfway point<\/li>\n\n\n\n
  • Front: third view is paced a the max depth for the stack<\/li>\n<\/ul>\n\n\n\n
    <\/path><\/path><\/svg><\/span>
    ZStack<\/span>() {<\/span><\/span>\n    <\/span>RoundedRectangle<\/span>(<\/span>cornerRadius<\/span>: <\/span>12.0<\/span>)<\/span><\/span>\n        .<\/span>foregroundStyle<\/span>(.<\/span>stepRed<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>200<\/span>, <\/span>height<\/span>: <\/span>200<\/span>)<\/span><\/span>\n<\/span>\n    <\/span>Spacer<\/span>() <\/span>\/\/ this spaces pushes the first view all the way to the back<\/span><\/span>\n<\/span>\n    <\/span>RoundedRectangle<\/span>(<\/span>cornerRadius<\/span>: <\/span>12.0<\/span>)<\/span><\/span>\n        .<\/span>foregroundStyle<\/span>(.<\/span>stepGreen<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>150<\/span>, <\/span>height<\/span>: <\/span>150<\/span>)<\/span><\/span>\n<\/span>\n    <\/span>Spacer<\/span>() <\/span>\/\/ this spacer pushes the last view all the way to the front<\/span><\/span>\n<\/span>\n    <\/span>RoundedRectangle<\/span>(<\/span>cornerRadius<\/span>: <\/span>12.0<\/span>)<\/span><\/span>\n        .<\/span>foregroundStyle<\/span>(.<\/span>stepBlue<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>100<\/span>, <\/span>height<\/span>: <\/span>100<\/span>)<\/span><\/span>\n}<\/span><\/span>\n.<\/span>frame<\/span>(<\/span>depth<\/span>: spacing)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Child views set their own depth<\/h2>\n\n\n\n
    In this example, each child view takes up 1\/3 of the available depth.<\/p>\n\n\n\n
    <\/path><\/path><\/svg><\/span>
    ZStack<\/span>() {<\/span><\/span>\n    <\/span>RoundedRectangle<\/span>(<\/span>cornerRadius<\/span>: <\/span>12.0<\/span>)<\/span><\/span>\n        .<\/span>foregroundStyle<\/span>(.<\/span>stepRed<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>200<\/span>, <\/span>height<\/span>: <\/span>200<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>depth<\/span>: spacing \/ <\/span>3<\/span>)<\/span><\/span>\n<\/span>\n    <\/span>RoundedRectangle<\/span>(<\/span>cornerRadius<\/span>: <\/span>12.0<\/span>)<\/span><\/span>\n        .<\/span>foregroundStyle<\/span>(.<\/span>stepGreen<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>150<\/span>, <\/span>height<\/span>: <\/span>150<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>depth<\/span>: spacing \/ <\/span>3<\/span>)<\/span><\/span>\n<\/span>\n    <\/span>RoundedRectangle<\/span>(<\/span>cornerRadius<\/span>: <\/span>12.0<\/span>)<\/span><\/span>\n        .<\/span>foregroundStyle<\/span>(.<\/span>stepBlue<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>100<\/span>, <\/span>height<\/span>: <\/span>100<\/span>)<\/span><\/span>\n        .<\/span>frame<\/span>(<\/span>depth<\/span>: spacing \/ <\/span>3<\/span>)<\/span><\/span>\n}<\/span><\/span>\n.<\/span>frame<\/span>(<\/span>depth<\/span>: spacing)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Video Demo<\/h2>\n\n\n\n\t\t
    \n\t\t\t