How to align ZStack View to elements in a view below it

Question

I have some vstack views, and a zstack view (its a dropdown menu).

I need the top of the zstack view to align itself perfectly with the text of VStack 2 Text like this

I think I need to utilize named coordinate spaces, but I have been unsuccessful in accomplishing this

Answer 1

You can use a custom alignmentGuide:

struct ContentView: View {
    
    @State private var selection: Int = 1
    
    var body: some View {
        ZStack(alignment: .myAlignment) { // important
            VStack(spacing: 0) {
                
                Text("VStack 1 - press long")
                    .padding()
                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
                    .background(.blue)
                
                Text("VStack 2")
                    .padding(.trailing)
                    // defining alignment point on "VStack 2" Text
                    .alignmentGuide(.myVerticalAlignment, computeValue: { d in
                        d[VerticalAlignment.top]
                    })
                    .alignmentGuide(.myHorizontalAlignment, computeValue: { d in
                        d[HorizontalAlignment.trailing]
                    })
                    .padding()
                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
                    .background(.orange)
                
                Text("VStack 3")
                    .padding()
                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
                    .background(.pink)

                Text("VStack 4")
                    .padding()
                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
                    .background(.green)
            }
            
            // Overlay
            VStack {
                Text("Item 1")
                Text("Item 2")
                Text("Item 3")
                Text("Item 4")
                Text("Item 5")
            }
            .padding()
            .background(.gray)
            // alignment of overlay
            .alignmentGuide(.myVerticalAlignment, computeValue: { d in
                d[VerticalAlignment.top]
            })
            .alignmentGuide(.myHorizontalAlignment, computeValue: { d in
                d[HorizontalAlignment.leading]
            })
        }
    }
}


extension VerticalAlignment {
    private enum MyVerticalAlignment : AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            return d[.bottom]
        }
    }
    
    static let myVerticalAlignment = VerticalAlignment(MyVerticalAlignment.self)
}

extension HorizontalAlignment {
    private enum MyHorizontalAlignment : AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            return d[.leading]
        }
    }
    
    static let myHorizontalAlignment = HorizontalAlignment(MyHorizontalAlignment.self)
}

extension Alignment {
    static let myAlignment = Alignment(horizontal: .myHorizontalAlignment, vertical: .myVerticalAlignment)
}
   

But a much easier way for a dropdown menu would be using either .contextMenu (appearing on long press)

                Text("VStack 1 - press long")
                // option 1
                    .contextMenu {
                        Button("Item 1") {}
                        Button("Item 2") {}
                        Button("Item 3") {}
                    }

or a Menu style picker:

               HStack {
                    Text("VStack 3")
                    // option 2
                    Picker("Menu", selection: $selection) {
                        Text("Item 1")
                        Text("Item 2")
                        Text("Item 3")
                    }
                    .pickerStyle(.menu)
                }