SwiftUI为什么在我的代码中创建的矩形不能填满整个页面？

Question

我正在尝试找出SwiftUI中的布局机制，尽管它相当简单，但我不知道我在这里缺少什么。

据我说，下面的代码应该用绿色填充设备的整个屏幕，但是由于某种原因，它在屏幕底部留下了很小的间隙。这不是安全区域，因为即使在较旧的设备（例如iPhone SE）中也存在差距。

我知道只要将屏幕颜色更改为绿色，就可以达到相同的结果；正如我说的，我正在尝试找出SwiftUI中的布局。

非常感谢您的帮助。

struct ContentView: View {
     var body: some View {            
         VStack {
             Green()
              .edgesIgnoringSafeArea(.all)
         }
     }
}

struct Green: View {
    let hh = UIScreen.main.bounds.height
    let ww = UIScreen.main.bounds.width

    var body: some View {
        ZStack {
            Rectangle()
            .fill(Color.green)
            .frame(width: ww, height: hh, alignment: .center)
        }
    }
}

Answer 1

这是由于使用了UIScreen限制，所以需要使用

struct Green: View {
    var body: some View {
        Rectangle()
           .fill(Color.green)
    }
}

并且区域完全填充，`是动态检测到的。经过Xcode 11.4测试。

Answer 2

只需在Rectangle()中使用ZStack。这是您的ContentView：

struct ContentView: View {
    var body: some View {
        ZStack {
            // This is your green background
            Rectangle()
            .fill(Color.green)
             .edgesIgnoringSafeArea(.all)

            // Use other UI stuffs here
            VStack {
                Text("Use other UI components here")
            }
        }
    }
}

结果：

Answer 3

您可以使用ZStack实现。将Color直接添加为组件

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.green
             .edgesIgnoringSafeArea(.all)
            Text("Use other UI components here")
        }
    }
}