SwiftUI中仅在Section Header吸顶固定时自定义样式

• 实现效果：仅当LazyVStack/ScrollView中的Section Header进入吸顶固定状态时，为Header应用自定义样式（如阴影），非吸顶状态保留原有默认样式。
• 现有问题：当前代码仅在卡片展开时就全量显示阴影，未关联Header吸顶状态，不符合预期效果。
• 实现要求：优先使用纯SwiftUI方案，兼容现有代码结构。

现有实现代码：

struct WorkoutCardView: View {
    @Binding var workout: Workout
    @State var expandWorkout: Bool = false
    
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        LazyVStack(alignment: .leading, pinnedViews: .sectionHeaders) {
            Section {
                if expandWorkout {
                    WCExerciseSectionView(workout: $workout)
                }
            } header: {
                WCTitleSectionView(workout: $workout)
                    .background {
                        Color(uiColor: .systemBackground)
                        Color(uiColor: .systemFill)
                    }
                    .cornerRadius(10)
                    .shadow(color: colorScheme == .light ?
                            Color.black.opacity(expandWorkout ? 0.6 : 0) :
                                Color.white.opacity(expandWorkout ? 0.6 : 0), radius: 5, x: 0, y: 2)
                    .padding(.all, 2)
            }
        }
        .padding(.all, 8)
        .background {
            RoundedRectangle(cornerRadius: 10)
                .fill(Color(uiColor: .systemFill))
        }
        .padding(.all, 8)
        .onTapGesture {
            withAnimation {
                expandWorkout.toggle()
            }
        }
    }
}

当前效果参考：

核心逻辑：通过自定义坐标空间标识滚动容器，使用GeometryReader读取Header在滚动容器中的实时位置，判断是否到达吸顶阈值，通过PreferenceKey将吸顶状态同步到业务层，最终根据状态控制阴影等自定义样式的显隐，全程不侵入原有布局结构。

实现步骤 #

1. 定义传递吸顶状态的偏好键
2. 为滚动容器（LazyVStack）绑定自定义坐标空间
3. 在Header背景层插入无布局影响的位置检测逻辑
4. 监听偏好值变化同步吸顶状态，关联样式显隐逻辑

修改后完整代码 #

// 自定义吸顶状态传递偏好键
private struct SectionHeaderPinnedPreferenceKey: PreferenceKey {
    static var defaultValue: Bool = false
    static func reduce(value: inout Bool, nextValue: () -> Bool) {
        value = nextValue()
    }
}

struct WorkoutCardView: View {
    @Binding var workout: Workout
    @State var expandWorkout: Bool = false
    // 记录Header实时吸顶状态
    @State private var isHeaderPinned: Bool = false
    
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        LazyVStack(alignment: .leading, pinnedViews: .sectionHeaders) {
            Section {
                if expandWorkout {
                    WCExerciseSectionView(workout: $workout)
                }
            } header: {
                WCTitleSectionView(workout: $workout)
                    .background {
                        // 位置检测层，透明色不影响原有布局
                        GeometryReader { proxy in
                            Color.clear
                                .preference(
                                    key: SectionHeaderPinnedPreferenceKey.self,
                                    // 阈值根据实际布局的顶部padding调整，示例中外层顶部padding为8
                                    value: proxy.frame(in: .named("cardScroll")).minY <= 8
                                )
                        }
                        // 原有背景逻辑保留
                        Color(uiColor: .systemBackground)
                        Color(uiColor: .systemFill)
                    }
                    .cornerRadius(10)
                    // 阴影改为同时满足「卡片展开」+「Header吸顶」时显示
                    .shadow(color: colorScheme == .light ?
                            Color.black.opacity(expandWorkout && isHeaderPinned ? 0.6 : 0) :
                                Color.white.opacity(expandWorkout && isHeaderPinned ? 0.6 : 0), radius: 5, x: 0, y: 2)
                    .padding(.all, 2)
            }
        }
        // 绑定自定义坐标空间
        .coordinateSpace(name: "cardScroll")
        .padding(.all, 8)
        .background {
            RoundedRectangle(cornerRadius: 10)
                .fill(Color(uiColor: .systemFill))
        }
        .padding(.all, 8)
        // 监听吸顶状态变化，添加短动画让阴影显隐更自然
        .onPreferenceChange(SectionHeaderPinnedPreferenceKey.self) { pinned in
            withAnimation(.easeInOut(duration: 0.2)) {
                isHeaderPinned = pinned
            }
        }
        .onTapGesture {
            withAnimation {
                expandWorkout.toggle()
            }
        }
    }
}

调试说明 #

• 吸顶判断阈值（示例中为8）需要根据实际布局调整：LazyVStack距离滚动容器顶部的距离为N时，将判断条件改为proxy.frame(in: .named("cardScroll")).minY <= N即可，可通过打印minY值快速得到准确阈值。

• iOS 17及以上系统可直接使用onScrollGeometryChange修饰符监听滚动容器的内容偏移，无需手动添加GeometryReader和PreferenceKey，代码更简洁。
• 混编UIKit的项目可通过UITableView/UICollectionView的代理方法获取Header悬挂状态，通过UIViewRepresentable桥接给SwiftUI使用，但重量高于纯SwiftUI方案。

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