Swiftui 将快捷界面视图的大小设置为safeAreaInsets.top+'；x'；

我试图在我的场景中创建一个完全出血的SwiftUI“header”视图。此标题将位于列表或可滚动的VStack中

为了做到这一点，我希望标题中的文本位于安全区域下方，但全视图应该从屏幕顶部延伸（因此，与安全区域重叠）。以下是视觉表现：

V:[（安全区域间距）-（填充）-（文本）]

以下是我的尝试：

struct HeaderView: View {

@State var spacing: CGFloat = 100

var body: some View {
    HStack {

        VStack(alignment: .leading) {

            Rectangle()
                .frame(height: spacing)
                .opacity(0.5)
            
            Text("this!").font(.largeTitle)
            Text("this!").font(.headline)
            Text("that!").font(.subheadline)
        }
        Spacer()
    }
    .frame(maxWidth: .infinity)
    .background(Color.red)
    .background(
        GeometryReader { proxy in
            Color.clear
                .preference(
                    key: SafeAreaSpacingKey.self,
                    value: proxy.safeAreaInsets.top
                )
        }
    )
    .onPreferenceChange(SafeAreaSpacingKey.self) { value in
        self.spacing = value
    }
}

}

---

然而，这似乎不能正确地确定“矩形”的大小。如何根据安全区域调整视图大小？

这就是您要寻找的吗？我尽量避免使用GeometryReader，除非你真的需要它。。。我创建了一个主视图，它有一个背景层和一个前景层。背景层将忽略安全区域（完全出血），但默认情况下前景将保持在安全区域内

struct HeaderView: View {

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Text("this!").font(.largeTitle)
                Text("this!").font(.headline)
                Text("that!").font(.subheadline)
            }
            Spacer(minLength: 0)
        }
    }
}

struct MainView: View {
    
    var body: some View {
        
        ZStack {
            
            // Background
            ZStack {
            }
            .frame(maxWidth:. infinity, maxHeight: .infinity)
            .background(Color.red)
            .edgesIgnoringSafeArea(.all)
            
            // Foreground
            VStack {
                HeaderView()
                Spacer()
            }
            
        }

    }
}