GeometryReader尺寸计算SwiftUI

Question

我正在尝试使用GeometryReader来放置视图。我使用GeometryReader修改了一个矩形()，它按我的预期放置。但是，我希望以编程方式将y值设置为与VStack框架顶部对齐。我以为我可以读取文本字段的几何高度并使用它，但是我不能将textField的几何维度分配给一个变量，即使我使用相同的概念来移动矩形。

图片：

简单的代码：

struct ContentView: View {

    @State private var textHeight = 0.0

    var body: some View {

        VStack {

            GeometryReader { geometry in
                VStack {
                    Text("Title Text")
                    }
                //self.textHeight = CGFloat(geometry.size.height)
            }.border(Color.green)

            GeometryReader { geometry in
                Rectangle()
                    .path(in: CGRect(x: geometry.size.width - 50,
                                     y: 0, width: geometry.size.width / 2.0,
                                     height: geometry.size.height / 2))
                    .fill(Color.red)
            }

        }.frame(width: 150, height: 300).border(Color.black)
    }
}

Xcode Beta 7，Catalina Beta 7任何指导将不胜感激。

Answer 1

问题是，您使用的是一个带有两个GeometryReader的GeometryReader。VStack将其子节点垂直放置，其中一个位于另一个。第二个y=0的GeometryReader是继第一个GeometryReader之后的第一个y。我建议您改变设计UI的方式，例如，您可以这样获得相同的结果：

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                ZStack {
                    Rectangle()
                        .path(in: CGRect(x: geometry.size.width - 50, y: 0, width: geometry.size.width / 2.0, height: geometry.size.height / 4))
                        .fill(Color.red)

                    Text("Title Text")
                        .frame(width: geometry.size.width, height: geometry.size.height/2.0)
                        .border(Color.green)
                }
                Spacer()
            }
        }
        .frame(width: 150, height: 300).border(Color.black)
    }
}

结果是：

​

​

要向上或向下或向左/右推送东西，您可以使用非常有用的Spacer视图。

这是我的建议，但如果您确实需要使用两个GeometryReader，您必须这样做：

struct ContentView2: View {

    @State private var textHeight = CGFloat(0)

    private func firstContentView(geometry: GeometryProxy) -> some View {
        textHeight = geometry.size.height
        return Text("Title Text")
            .position(x: geometry.size.width/2.0, y: geometry.size.height/2.0)
    }

    var body: some View {
        VStack(spacing: 0) {
            GeometryReader { geometry in
                self.firstContentView(geometry: geometry)                    
            }.border(Color.green)

            GeometryReader { geometry in
                Rectangle()
                    .path(in: CGRect(x: geometry.size.width - 50, y: -self.textHeight, width: geometry.size.width / 2.0, height: geometry.size.height / 2))
                    .fill(Color.red)
            }
        }.frame(width: 150, height: 300).border(Color.black)
    }
}

但这是个相当肮脏的解决方案。