将SwiftUI视图的大小设置为safeAreaInsets.top +'x'

时间:2020-10-14 23:29:09

标签: swiftui

我正在尝试在场景中创建一个完整的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
    }
}

}

但是,这似乎无法正确调整“矩形”的大小。如何根据安全区域调整视图大小?

1 个答案:

答案 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()
            }
            
        }

    }
}