SwiftUI中如何让ScrollView内的子视图延伸至屏幕边缘

ScrollView的内容区域默认会根据子视图的尺寸自适应，内部的VStack没有显式宽度约束时，只会收缩到刚好容纳内部元素的宽度，因此即使EventSubtitleView设置了maxWidth: .infinity，也只能撑满VStack的宽度，无法延伸到屏幕边缘。

方法一：修改父视图约束（推荐） #

仅需要给ScrollView内部的VStack添加宽度约束，让其撑满ScrollView的可用宽度即可：

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)
                }
                // 新增该行，让VStack撑满ScrollView的全宽
                .frame(maxWidth: .infinity)
            }
        }
    }
}

如果需要横屏场景下蓝色背景也能延伸到左右安全区域边缘，可额外修改EventSubtitleView的背景配置：

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
                    // 新增该行，仅让背景忽略水平方向安全区域限制
                    .ignoresSafeArea(edges: .horizontal)
            )
            .foregroundColor(ColorPanel.lightCream.color)
    }
}

该方案的优势是仅背景跨安全区域展示，文字内容仍然遵循安全区域约束，不会出现文字被屏幕边缘裁切的问题。

方法二：全局忽略水平安全区域 #

如果不需要单独控制子元素的安全区域规则，也可以直接给ScrollView添加忽略水平安全区域的配置：

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)
                }
                .frame(maxWidth: .infinity)
            }
            // 新增该行，让整个ScrollView内容延伸到水平安全区域外
            .ignoresSafeArea(edges: .horizontal)
        }
    }
}

使用该方案时需要注意给内部文字内容手动添加水平padding，避免文字被屏幕边缘裁切。

内容的提问来源于stack exchange，提问作者bobby123uk