SwiftUI ScrollView 裁剪：让阴影与内容溢出边界

问题背景

出于性能优化和视图层级管理的考虑，SwiftUI 的 ScrollView 默认行为类似于 clipsToBounds = true。这意味着，如果你的子视图拥有较大的阴影、光晕效果，或者使用了 offset 偏移出滚动区域，这些部分会被无情截断，导致 UI 看起来“被切了一刀”。

解决方案

方案 1：原生完美方案 (iOS 17+)

从 iOS 17 (watchOS 10, macOS 14) 开始，Apple 引入了专门的修饰符 scrollClipDisabled。

struct ScrollClipDisabledDemo: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 40) {
                ForEach(0..<5) { i in
                    CardView(index: i)
                }
            }
            .padding()
        }
        // 关键代码：禁止滚动视图裁剪内容
        // 使得卡片的阴影即便超出 ScrollView 区域也能完整显示
        .scrollClipDisabled() 
        .padding(20) // 给 ScrollView 本身留出空间，展示溢出效果
    }
}

struct CardView: View {
    let index: Int
    var body: some View {
        RoundedRectangle(cornerRadius: 16)
            .fill(.blue.gradient)
            .frame(height: 100)
            // 大半径阴影，通常会被默认的 ScrollView 裁剪
            .shadow(color: .black.opacity(0.5), radius: 20, x: 0, y: 10)
            .overlay(Text("Item \(index)").foregroundStyle(.white))
    }
}

方案 2：兼容旧版本 (Introspect)

对于需要支持 iOS 16 及以下版本的项目，我们需要访问底层的 UIScrollView 实例并将 clipsToBounds 设置为 false。使用 SwiftUI-Introspect 库可以安全地实现这一点。

import SwiftUIIntrospect

ScrollView {
    // 内容代码...
}
.introspect(.scrollView, on: .iOS(.v15, .v16, .v17)) { scrollView in
    // 禁用裁剪，允许内容绘制在 Bounds 之外
    scrollView.clipsToBounds = false
    
    // 注意：禁用裁剪后，内容可能会覆盖到 NavigationBar 或 TabBar
    // 可能需要手动调整 zIndex 或布局层级
}

注意事项

1. 点击区域（Hit Testing）：虽然 scrollClipDisabled 让内容在视觉上溢出了，但溢出部分的交互响应（如点击）可能仍受原 Frame 限制，具体取决于视图层级结构。
2. 性能影响：禁用裁剪可能会导致渲染区域增大。在列表包含大量复杂阴影或模糊效果时，需注意滚动性能。

延伸阅读

• ScrollView 的新功能
• SwiftUI 滚动控制 API 的发展历程
• 在 SwiftUI 中使用 UIKit 视图