How to position a List using ZStack & Geometry?

Question

I'm trying to position a ListView directly below a text field, using a ZStack and the field's geometry - its position and size. This is with a view toward creating an autocomplete picklist

Setting the offset only appears to half work.

So far it looks as follows.

Emulator and device appears as on the right:

Some useful information here:

https://swiftui-lab.com/geometryreader-to-the-rescue/

import SwiftUI

struct TestView: View {

    @State private var firstname = ""
    @State private var lastname = ""
    @State private var townCity = ""

    @State private var rect: CGRect = CGRect()

    var body: some View {
        ZStack (alignment: .topLeading){
            VStack{
                Form {
                    Section {
                        TextField("Firstname", text: $firstname)
                        TextField("Lastname", text: $lastname)

                        ZStack{
                            VStack (alignment: .leading, spacing: 0){
                                TextField("Town/City", text: self.$townCity)
                                    .background(GeometryGetterV2(rect: $rect))
                            }
                            .border(Color.black, width: 1)
                        }
                        Button("Save") {
                        }
                    }
                }
            }
            SelectionsPickerV2()
                .offset(x: rect.origin.x, y: rect.origin.y)
                //.offset(x: rect.minX, y: rect.minY)
                .frame(
                    width: rect.size.width,
                    height: rect.size.height * 7)
        }
        .coordinateSpace(name: "myZstack")
    }
}

struct SelectionsPickerV2: View {

    var body: some View {
        VStack (alignment: .leading) {
            List{
                Text("Sydney, Australia")
                Text("New York, New York")
                Text("London, UK")
                Text("Paris, France")
            }
            .background(Color.blue)
        }
        .border(Color.red, width: 1)
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

struct GeometryGetterV2: View {
    @Binding var rect: CGRect

    var body: some View {
        return GeometryReader { geometry in
            self.makeView(geometry: geometry)
        }
    }

    func makeView(geometry: GeometryProxy) -> some View {
        DispatchQueue.main.async {
            self.rect = geometry.frame(in: .named("myZstack"))
            //self.rect = geometry.frame(in: .local)
            //self.rect = geometry.frame(in: .global)
        }

        return Rectangle().fill(Color.clear)
    }
}

Hi Craig, you forgot to include the code of your SelectionsPicker. Let me know when you post it. ;-) — kontiki

Rivera Rivera · Accepted Answer · 2019-12-24T20:19:48

As many mentioned, your ZStack being the top level view gets geometry calculations wrong as the navigation bar gets added, etc. Probably just another SwiftUI bug.

To fix it just embed your ZStack inside a new parent view.

struct TestView: View {

    // ...

    var body: some View {
        VStack { // New parent view
            ZStack (alignment: .topLeading){
                // ...
            }
            SelectionsPickerV2()
                .offset(x: rect.origin.x, y: rect.origin.y)
                .frame(
                    width: rect.size.width,
                    height: rect.size.height * 7)
            }
            .coordinateSpace(name: "myZstack") // Fixed coordinate space
        }
    }
}

How to position a List using ZStack & Geometry?

2 Answers