如何在 SwiftUI 中获取视图或屏幕的高度和宽度

Question

我正在使用拖动手势来更改颜色对象的色相/饱和度。 这个想法是您可以在屏幕上拖动并查看所有色相值 (0.0 - 1.0)，以及饱和度从上到下相同。

我需要屏幕的大小（或视图，这是一个单视图应用程序），以便将 CGPoint 值规范化/转换为 0.0 - 1.0 之间的范围，但无论如何我都无法找到获取此信息的方法。 有很多线程在讨论这个，但他们通常会讨论如何在我只想检索视图时设置视图的宽度/高度。

我一切正常，只是我使用硬编码值来规范化它。

Answer 1

查看GeometryReader 。 它允许您获取当前视图的大小：

struct ContentView: View {
    
    var body: some View {
        GeometryReader { geo in
            VStack {
                Text("Hello World!")
                Text("Size:  (\(geo.size.width), \(geo.size.height))")
            }
        }
    }
}

这是一个示例，您可以在屏幕上拖动以更改色调值：

struct ContentView: View {

    @State private var hue: CGFloat = 0
    
    var body: some View {
        GeometryReader { geo in
            ZStack {
                Color.white
                    .gesture(DragGesture().onChanged({ value in
                        self.hue = value.location.y / geo.size.height
                    }))
                
                VStack {
                    Text("Hello World!")
                    Text("Size:  (\(geo.size.width), \(geo.size.height))")
                    Text("Hue:  \(self.hue)")
                }.allowsHitTesting(false)
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

---

GeometryReader破坏了您的视图布局？ 看看这个要点。

Answer 2

为了完整GeometryReader ， GeometryReader将返回容器的大小。 由于 OP 明确提到了屏幕尺寸，因此值得一提UIScreen类。 我们可以使用UIScreen.main.bounds.height和UIScreen.main.bounds.height来获取屏幕尺寸，而无需 GeometryReader。 值得补充的是 GeometryReader 结果反映了容器的大小，这将与UIScreen返回的不同

例子

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader {geometry in
            VStack {
                Text("Sizes")
                    .font(.title)
                VStack {
                    Text("Screen width via UIScreen: \(Int(UIScreen.main.bounds.width))")
                    Text("Screen height via UIScreen: \(Int(UIScreen.main.bounds.height))")
                    Text("This VStack height: \(Int(geometry.size.height))")
                    Text("This VStack width: \(Int(geometry.size.width))")
                }
            }
        }
    }
}

结果