如何在 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将返回容器的大小。由于OP明确提到了屏幕尺寸，因此可能值得一提UIScreen类别。我们可以使用UIScreen.main.bounds.width和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))")
                }
            }
        }
    }
}

结果