SwiftUI中如何将颜色延伸至ScrollView顶部边缘之外

方法一：给ScrollView设置衔接的渐变背景 #

这种方法最简洁，让ScrollView的背景与顶部渐变区域颜色一致，下拉时露出的就是背景渐变，完全消除违和感，同时滚动回弹正常，无额外空白问题。

struct ExperimentView: View {
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack {
                    // 顶部渐变区域
                    LinearGradient(
                        colors: [.blue.opacity(0.5), .clear],
                        startPoint: .top,
                        endPoint: .bottom
                    )
                    .frame(height: 200)
                    
                    Text("Element")
                    Text("Element")
                    Text("Element")
                    // 添加更多内容测试滚动效果
                    ForEach(0..<20) { _ in
                        Text("More Element")
                    }
                }
            }
            // 给ScrollView设置与顶部渐变起始色衔接的背景
            .background(
                LinearGradient(
                    colors: [.blue.opacity(0.5), .clear],
                    startPoint: .top,
                    endPoint: .bottom
                )
                .ignoresSafeArea()
            )
        }
    }
}

方法二：动态跟踪滚动偏移添加扩展背景 #

如果需要更精准控制下拉时的视觉效果，可通过跟踪滚动偏移，在下拉时动态添加与渐变起始色一致的顶部背景，避免露出默认底色。

struct ExperimentView: View {
    @State private var scrollOffset: CGFloat = 0
    
    var body: some View {
        NavigationStack {
            ScrollView {
                // 用于跟踪滚动偏移的隐形视图
                GeometryReader { proxy in
                    Color.clear
                        .preference(key: ScrollOffsetKey.self, value: proxy.frame(in: .named("scroll")).minY)
                }
                .frame(height: 0)
                
                VStack {
                    LinearGradient(
                        colors: [.blue.opacity(0.5), .clear],
                        startPoint: .top,
                        endPoint: .bottom
                    )
                    .frame(height: 200)
                    
                    Text("Element")
                    Text("Element")
                    Text("Element")
                    ForEach(0..<20) { _ in
                        Text("More Element")
                    }
                }
            }
            .coordinateSpace(name: "scroll")
            // 监听滚动偏移变化
            .onPreferenceChange(ScrollOffsetKey.self) { value in
                scrollOffset = value
            }
            // 下拉时在顶部叠加同色背景
            .overlay(
                LinearGradient(
                    colors: [.blue.opacity(0.5), .blue.opacity(0.5)],
                    startPoint: .top,
                    endPoint: .bottom
                )
                .frame(height: max(-scrollOffset, 0))
                .alignmentGuide(.top) { _ in max(-scrollOffset, 0) }
                .allowsHitTesting(false),
                alignment: .top
            )
        }
    }
}

// 自定义PreferenceKey用于传递滚动偏移
private struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

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