忽略滚动视图中的安全区域，但不忽略其子视图

Question

查看下面的子视图，您可以看到它延伸到屏幕的整个宽度并考虑了凹口，这很棒。

struct EventSubtitleView: View {
    
    let model: EventSubtitleViewModel
    
    var body: some View {
        Text(model.subtitle)
            .frame(maxWidth: .infinity, alignment: .leading)
            .font(.subheadline)
            .padding()
            .background(ColorPanel.oceanBlue.color)
            .foregroundColor(ColorPanel.lightCream.color)
    }
}

在更大的场景中使用此视图作为子视图看起来也很棒。但这个场景存在底部文本剪切的问题。

struct EventDetailView: View {
    
    let model: EventDetailViewModel
    
    var body: some View {
        ZStack(alignment: .top) {
            ColorPanel.lightCream.color
                .ignoresSafeArea()
            VStack(spacing: 0) {
                EventTitleView(title: model.title)
                EventSubtitleView(model: model.subtitleViewModel)
                EventMessageView(message: model.message)
            }
        }
    }
}

因此，如果我引入一个滚动视图来解决这个问题。但现在我的蓝色子视图不再延伸到屏幕边缘。

struct EventDetailView: View {
    
    let model: EventDetailViewModel
    
    var body: some View {
        ZStack(alignment: .top) {
            ColorPanel.lightCream.color
                .ignoresSafeArea()
            ScrollView {
                VStack(spacing: 0) {
                    EventTitleView(title: model.title)
                    EventSubtitleView(model: model.subtitleViewModel)
                    EventMessageView(message: model.message)
                }
            }
        }
    }
}

如何让蓝色视图在滚动视图中延伸到屏幕边缘？

Answer 1

1. 用 包裹滚动视图GeometryReader，以便您可以访问safeAreaInsets值。
2. 内部GeometryReader应用ignoresSafeArea：如果你在外部应用它，safeAreaInsets则为零。
3. 使用值添加padding在背景之前ignoresSafeArea

GeometryReader { geometry in
    ScrollView {
        ForEach(0..<10) { i in
            HStack {
                Text("\(i)")
                Spacer()
            }
            .padding(.leading, geometry.safeAreaInsets.leading)
            .padding(.trailing, geometry.safeAreaInsets.trailing)
            .background(i % 2 == 0 ? Color.blue : .clear)
        }
    }
    .ignoresSafeArea(edges: .horizontal)
}

结果：