SwiftUI 测量视图的高度答案

【问题标题】：SwiftUI measuring the height of a viewSwiftUI 测量视图的高度
【发布时间】：2021-02-20 14:42:47
【问题描述】：

我尝试通过在其上使用 coordinatespace 来测量视图的高度，但它返回的值是全屏的高度。知道为什么我的代码没有给我想要的吗？

struct GeoReader: View {
    var body: some View {
        GeometryReader { geo in
            VStack {
                ZStack {
                    Rectangle()
                        .foregroundColor(.blue)
                    Text("Heigt of full screen is \(geo.size.height)")
                }
                ZStack {
                    Rectangle()
                        .foregroundColor(.red)
                        .coordinateSpace(name: "Redbox")
                    Text("Height of red box is \(geo.frame(in: .named("Redbox")).height)")
                }
            }
        }
    }
}

【问题讨论】：

标签： swiftui geometryreader

【解决方案1】：

显示尺寸是作为内部视图容器的完整视图的尺寸。

您需要使用另一个 GeometryReader 来获取第二个 ZStack 的内部尺寸。

struct ContentView: View {
    var body: some View {
        GeometryReader { geo in
            VStack {
                ZStack {
                    Rectangle()
                        .foregroundColor(.blue)
                    Text("Heigt of full screen is \(geo.size.height)")
                }
                GeometryReader { innterGeo in //<Here
                    ZStack {
                        Rectangle()
                            .foregroundColor(.red)
                            .coordinateSpace(name: "Redbox")
                        Text("Height of red box is \(innterGeo.frame(in: .named("Redbox")).height)")
                    }
                }
            }
        }
    }
}

如果你需要在任何地方使用这个，那么你可以使用这个方法。

首先，创建一个结构并使用 GeometryReader 包装您的内容。

struct GeometryContentSize<Content: View>: View {
    public var content: (CGSize) -> Content
    
    var body: some View {
        GeometryReader { geo in
            content(geo.size)
        }
    }
}

用法：

struct ContentView: View {
    var body: some View {
        GeometryReader { geo in
            VStack {
                ZStack {
                    Rectangle()
                        .foregroundColor(.blue)
                    Text("Heigt of full screen is \(geo.size.height)")
                }
                
                GeometryContentSize { (size) in //<--- Here
                    ZStack {
                        Rectangle()
                            .foregroundColor(.red)
                        Text("Height of red box is \(size.height)")
                    }
                }
            }
        }
    }
}

【讨论】：

【解决方案2】：

几何阅读器测量整个屏幕，因为您将几何阅读器放在视图主体的顶部。因此它将读取它返回的视图的几何形状。在这种情况下是整个屏幕。

如果你想得到两个矩形的大小，你可以将几何阅读器放在矩形和文本的堆栈中。

struct GeoReader: View {
    var body: some View {
        GeometryReader { geo1 in
            VStack {
                ZStack {
                    Rectangle()
                        .foregroundColor(.blue)
                    Text("Heigt of full screen is \(geo1.size.height)")
                }
                ZStack {
                    GeometryReader { geo2 in
                        Rectangle()
                            .foregroundColor(.red)
                            .coordinateSpace(name: "Redbox")
                        Text("Height of red box is \(geo2.frame(in: .named("Redbox")).height)")
                    }
                }
            }
        }
    }
}

【讨论】：