欢迎来到Stack Overflow！您并没有误解.ignoresSafeArea()，而是误解了修饰符的顺序如何影响视图。除少数修改器外，所有修改器都返回一个包含前一个视图的视图。我把你的代码和重构成一个单一的视图，因为我认为这是混淆你以及。我对代码进行了注解，以帮助使其清晰。每个数字都是由后续视图 Package 的视图：

struct IgnoresSafeAreaView: View {
    var body: some View {
        // 4. VStack
        VStack {
            // 1. Rectangle
            Rectangle()
                .foregroundColor(.red)
                // 2. Frame
                .frame(width: 400.0, height: 500)
                .ignoresSafeArea(.container, edges: .top)
                // 3. background
                .background { Color.blue }
            Spacer()
        }
    }
}

上面的代码完全呈现了图片中显示的内容，因为最后，您的代码返回了VStack作为视图。因此，您有红色的矩形视图，蓝色背景视图的一瞥，以及Spacer（没有显示任何内容，因此显示为白色），所有这些都位于VStack中。
你真实的的困惑在于修饰语的顺序。首先创建一个红色矩形。这将跨越整个屏幕，除了顶部和底部的安全区域。
然后将该矩形放在一个恒定的400 x500帧内。它永远不会更多，它永远不会更少。这将简单地在屏幕上垂直居中矩形，而不是400 x500的大小。添加VStack不会改变这一点，因为VStack的垂直对齐是居中的。此时，VStack与矩形大小相同，因为它没有自己的大小。如果你在上面放一个.background(.green)，你就看不到它了。
这是当前描述的代码：

VStack {
        Rectangle()
            .foregroundColor(.red)
            .frame(width: 400.0, height: 500)
    }
    .background(.green)

在矩形后面添加Spacer()，您将看到绿色背景，这将进入安全区域，但矩形不会：

VStack {
        Rectangle()
            .foregroundColor(.red)
            .frame(width: 400.0, height: 500)
        Spacer()
    }
    .background(.green)

如果你在矩形上加上.ignoresSafeArea(.container, edges: .top)，或者简单的.ignoresSafeArea(edges: .top)（和这个视图没有区别），你会看到400 x500的矩形移动到安全区域。由于矩形在框架中，因此它不能增长，因此它会移动。但是，蓝色背景仍然可以看到矩形，而不会向上移动，因此它位于矩形后面，但对于.ignoresSafeArea()。这段代码很好地演示了这一点：

VStack {
        Rectangle()
            .foregroundColor(.red.opacity(0.5))
            .frame(width: 400.0, height: 500)
            .ignoresSafeArea(edges: .top)
            .background { Color.blue }
        Spacer()
    }

在红色和蓝色重叠的地方，你会看到紫色，否则红色上的不透明度会使它看起来像粉红色。
现在让我们看看修改器的顺序。反转.frame()和.ignoresSafeArea()会导致矩形的大小增加，以占据安全区域，框架现在保持不变，不会移动，所以你再也看不到底部的蓝色（我认为你最初是例外）

VStack {
        Rectangle()
            .foregroundColor(.red.opacity(0.5))
            .ignoresSafeArea(edges: .top)
            .frame(width: 400.0, height: 500)
            .background { Color.blue }
        Spacer()
    }

最后的答案是改变修饰符的顺序会完全改变你的结果，通常是以意想不到的方式。