SwiftUI 为什么我的代码中创建的 Rectangle 没有填满整个页面？

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

只需在 ZStack 中使用 Rectangle()。这是你的 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")
        }
    }
}

SwiftUI 为什么我的代码中创建的 Rectangle 没有填满整个页面？

SwiftUI Why doesn't the Rectangle created in my code fill up the whole page?

autolayout

swiftui