2

我正在尝试将 ListView 直接放置在文本字段下方，使用 ZStack 和字段的几何图形 - 它的位置和大小。这是为了创建一个自动完成选项列表

设置偏移量似乎只成功了一半。

到目前为止，它看起来如下。

模拟器和设备如右图所示：

在此处输入图像描述

这里有一些有用的信息：

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)
    }
}
4

2 回答 2

0

正如许多人所提到的，ZStack当添加导航栏等时，您作为顶级视图会导致几何计算错误。可能只是另一个 SwiftUI 错误。

要修复它，只需将您嵌入ZStack到新的父视图中。

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
        }
    }
}
于 2019-12-24T20:19:48.550 回答
-1

您使用的是什么 Xcode 版本，我的看起来不错（Xcode 11.2，beta 11B41）。

在此处输入图像描述

于 2019-10-23T11:27:36.473 回答