SwiftUI日历组件：固定头部HStack仅顶部匹配导航栏背景色

要让包含“S M T W...”的HStack仅在固定于屏幕顶部时背景色与导航栏一致，可通过追踪Section Header的位置状态动态切换背景色，具体实现如下：

1. 定义偏好键捕获Header位置 #

先创建一个偏好键，用于传递Header的全局坐标信息：

struct HeaderOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {}
}

2. 修改CalendarMain代码实现动态背景 #

在你的CalendarMain结构体中添加状态变量，调整Header视图逻辑：

struct CalendarMain<DateView>: View where DateView: View {
    @Environment(\.calendar) var calendar
    @EnvironmentObject var calendarViewModel: CalendarViewModel
    @Environment(\.colorScheme) var colorScheme // 适配明暗模式导航栏颜色
    
    let dayLetters = ["S", "M", "T", "W", "T", "F", "S"]
    let interval: DateInterval
    let content: (Date) -> DateView
    
    @State private var firstAppear = true
    @State private var isHeaderPinned = false // 标记Header是否处于固定状态
    
    init(interval: DateInterval, @ViewBuilder content: @escaping (Date) -> DateView) {
        self.interval = interval
        self.content = content
    }
    
    private var months: [Date] {
        calendar.generateDates(
            inside: interval,
            matching: DateComponents(day: 1, hour: 0, minute: 0, second: 0)
        )
    }
    
    var body: some View {
        ScrollViewReader { value in
            ScrollView(showsIndicators: false) {
                LazyVStack(pinnedViews: .sectionHeaders) {
                    Section {
                        // 原有的日期内容代码
                    } header: {
                        HStack {
                            ForEach(0..<dayLetters.count, id: \.self) { index in
                                Text(dayLetters[index])
                                    .frame(maxWidth: .infinity)
                                    .foregroundColor(.white)
                            }
                        }
                        // 动态切换背景色
                        .background(isHeaderPinned ? navigationBarBackgroundColor : Color.clear)
                        // 捕获Header位置信息
                        .background(
                            GeometryReader { proxy in
                                Color.clear.preference(
                                    key: HeaderOffsetKey.self,
                                    value: proxy.frame(in: .global).minY
                                )
                            }
                        )
                    }
                }
            }
            .onPreferenceChange(HeaderOffsetKey.self) { offset in
                // 安全区顶部高度作为固定状态判断阈值
                let safeAreaTop = UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0
                isHeaderPinned = offset <= safeAreaTop
            }
            .onAppear {
                if firstAppear {
                    firstAppear = false
                    value.scrollTo(isMonthToday(), anchor: .center)
                }
            }
            .onChange(of: calendarViewModel.selectedDay) { selectedDay in
                guard let selectedDay = selectedDay else { return }
                withAnimation {
                    value.scrollTo(selectedDay.date.description, anchor: .trailing)
                }
            }
        }
    }
    
    // 获取与系统导航栏匹配的背景色（可替换为自定义导航栏颜色）
    private var navigationBarBackgroundColor: Color {
        switch colorScheme {
        case .light, .dark:
            return Color(.systemBackground)
        @unknown default:
            return Color(.systemBackground)
        }
        // 若使用自定义导航栏颜色，直接替换为对应值，例如：
        // return Color(red: 0.1, green: 0.3, blue: 0.6)
    }
    
    func isMonthToday() -> Date {
        for month in months {
            if Calendar.current.isDate(Date(), equalTo: month, toGranularity: .month) {
                return month
            }
        }
        return months[0]
    }
}

核心逻辑说明 #

• 位置捕获：通过GeometryReader获取Header的全局Y坐标，当坐标小于等于安全区顶部高度时，判定Header已固定在导航栏下方。
• 背景切换：根据isHeaderPinned状态，将HStack背景色切换为与导航栏一致的颜色（默认适配系统明暗模式，可根据自定义导航栏颜色调整navigationBarBackgroundColor）。

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