我正在尝试在场景中创建一个完整的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
}
}
}
但是,这似乎无法正确调整“矩形”的大小。如何根据安全区域调整视图大小?
答案 0 :(得分:0)
这是您要找的吗?除非确实需要,否则我尽量避免使用GeometryReader ...我创建了一个MainView,它具有背景层和前景层。背景层将忽略安全区域(完全出血),但默认情况下前景将保留在安全区域内。
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()
}
}
}
}