Lab 073 – Ornaments can have their own ornaments

I heard you like ornaments so I made you an ornament for your ornament.

Just something a little weird today. In visionOS 26 there is a new anchor option called parent. In visionOS 1 and 2 we always used .scene to anchor ornaments. Now we can use .parent too. The docs for this are pretty sparse, but it suggests we can place ornaments inside ornaments.

The parent depends on where the ornament modifier is placed. When used inside another ornament context, that ornament is the parent. Otherwise, it’s the Scene itself.

Neat! I’m not sure what to do with this information. I’ll just share it with you and go about my day.

When working with windows in visionOS, we normally use UnitPoint to define anchor positions. In Volumes we use UnitPoint3D (although we technically can use this windows too). Interestingly, the option for .parent only accepts UnitPoint3D. If you do want to use this feature in a window, you may want to consider using the “back” version of the positions. Otherwise your child ornament may hover slightly in front of the parent ornament.

Learn how to use ornaments for windows and volumes. Check out the Spatial SwiftUI series for some additional examples covering tab views and toolbars.

struct Lab073: View {

    var body: some View {
        VStack {
            Text("🤷🏻‍♂️")
                .font(.extraLargeTitle2)
            Text("A window with an ornament with an ornament")
                .font(.headline)
        }
        .ornament(
            visibility: .automatic,
            attachmentAnchor: .scene(.topTrailingBack),
            contentAlignment: .center
        ) {
            Text("Ornament")
                .padding(12)
                .background(.black)
                .cornerRadius(12)
                .ornament(
                    visibility: .automatic,
                    attachmentAnchor: .parent(.topLeadingBack),
                    contentAlignment: .center
                ) {
                    Text("42")
                        .padding(6)
                        .background(.red)
                        .cornerRadius(20)
                }
        }
    }

}

struct Lab073: View {

    var body: some View {
        VStack {
            Text("🤷🏻‍♂️")
                .font(.extraLargeTitle2)
            Text("A window with an ornament with an ornament")
                .font(.headline)
        }
        .ornament(
            visibility: .automatic,
            attachmentAnchor: .scene(.topTrailingBack),
            contentAlignment: .center
        ) {
            Text("Ornament")
                .padding(12)
                .background(.black)
                .cornerRadius(12)
                .ornament(
                    visibility: .automatic,
                    attachmentAnchor: .parent(.topLeadingBack),
                    contentAlignment: .center
                ) {
                    Text("42")
                        .padding(6)
                        .background(.red)
                        .cornerRadius(20)
                }
        }
    }

}

Download the Xcode project with this and many more labs from Step Into Vision.