如何实现通过DatePicker选择日期切换SwiftUI的TabView页面？

问题场景 #

已实现包含3个页面的TabView（支持滑动切换）和限制日期范围的DatePicker，但无法通过选择日期跳转至对应页面，需要实现滑动切换页面时同步更新DatePicker，选择日期时自动跳转对应页面的双向同步效果，且方案需支持未来扩展更多页面。

解决方案核心思路 #

直接将TabView的selection绑定到Date类型的@State变量，同时给每个页面设置对应日期的tag，利用SwiftUI的绑定机制实现双向同步：

• 选择日期时，date变量更新，TabView自动切换到对应tag的页面
• 滑动页面时，TabView的selection会更新date变量，DatePicker同步显示当前页面的日期

完整代码实现 #

import SwiftUI

struct DailyOverviewTab: View {
    // 绑定选中的日期，同时作为TabView的选中标识
    @State private var date = Date()
    
    // 存储所有允许访问的页面日期，未来扩展只需在此添加新日期
    private let availableDates: [Date] = {
        let calendar = Calendar.current
        return [
            calendar.date(from: DateComponents(year: 2024, month: 5, day: 6))!,
            calendar.date(from: DateComponents(year: 2024, month: 5, day: 7))!,
            calendar.date(from: DateComponents(year: 2024, month: 5, day: 8))!
        ]
    }()
    
    // 基于可用日期自动生成范围，避免重复硬编码
    private let dateRange: ClosedRange<Date> = availableDates.min()! ... availableDates.max()!

    var body: some View {
        VStack {
            TabView(selection: $date) {
                Six_May()
                    .tag(availableDates[0])
                Seven_May()
                    .tag(availableDates[1])
                Eight_May()
                    .tag(availableDates[2])
            }
            .tabViewStyle(.page)
            .foregroundColor(.green)
            
            DatePicker("", selection: $date, in: dateRange, displayedComponents: [.date])
                .datePickerStyle(.compact)
                .labelsHidden()
        }
    }
}

// 示例页面View（根据实际需求实现）
struct Six_May: View {
    var body: some View {
        Text("5月6日页面")
    }
}

struct Seven_May: View {
    var body: some View {
        Text("5月7日页面")
    }
}

struct Eight_May: View {
    var body: some View {
        Text("5月8日页面")
    }
}

扩展说明 #

未来需要添加新页面时，只需两步：

1. 在availableDates数组中添加新的日期对象
2. 创建对应的页面View，并在TabView中添加该View，设置tag为新增的日期即可

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