嘗試像 Apple 日歷默認應用程序一樣實現可滑動的周視圖

Question

我想要類似於默認的 Apple 日歷周視圖。 當滑動到下一周/上一周時，動作看起來像一個卷軸，但我個人認為他們不會在記憶中保留所有這些星期。而且在結束滾動動作后，一周總是居中。

從該周視圖滑動/拖動時，如何更新以顯示上一周/下一周？

所以這是我的 HomeTabView。

struct HomeTabView: View {
@Namespace var animation

@EnvironmentObject var workoutManager: WorkoutManager
@EnvironmentObject var dateModel: DateModel

init() {
        UITabBar.appearance().isHidden = true
}

var body: some View {
    GeometryReader { geometry in
        ScrollView(.vertical, showsIndicators: false) {
            LazyVStack(spacing: 10, pinnedViews: [.sectionHeaders]) {
                Section {
                    //MARK: - Week View
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 4) {
                            ForEach(dateModel.currentWeek, id: \.self) { day in
                                VStack() {
                                    Text(dateModel.extractDate(date: day, format: "dd"))
                                        .font(.system(size: 15))
                                        .fontWeight(.semibold)
                                    Text(dateModel.extractDate(date: day, format: "EE"))
                                        .font(.system(size: 14))
                                    Circle()
                                        .fill(dateModel.isToday(date: day) ? .white : .black)
                                        .frame(width: 8, height: 8)
                                        .opacity(workoutManager.hasWorkouts(for: dateModel.extractDate(date: day, format: "dd/MM/yyy")) ? 1 : 0)
                                }
                                .foregroundStyle(dateModel.isToday(date: day) ? .primary : .tertiary)
                                .foregroundColor(dateModel.isToday(date: day) ? .white : .black)
                                .frame(width: (geometry.size.width - 32) / 7, height: geometry.size.width / 7 * 1.5)
                                .background (
                                    ZStack {
                                        if dateModel.isToday(date: day) {
                                            Capsule()
                                                .fill(.black)
                                                .matchedGeometryEffect(id: "CURRENTDAY", in: animation)
                                        }
                                    }
                                )
                                .contentShape(Capsule())
                                .onTapGesture {
                                    withAnimation {
                                        dateModel.currentDay = day
                                    }
                                }
                            }
                        }
                        .padding(.vertical, 5)
                        .frame(maxWidth: .infinity)
                        .frame(minWidth: geometry.size.width)
                        .background(
                            GeometryReader { parentGeometry in
                                Rectangle()
                                    .fill(Color(UIColor.systemGray2))
                                    .frame(width: parentGeometry.size.width, height: 0.5)
                                    .position(x: parentGeometry.size.width / 2, y: parentGeometry.size.height)
                            }
                        )
                    }
                    WorkoutsView()
                } header: {
                    HeaderView()
                }
            }
        }
        .frame(maxHeight: .infinity)
    }
    .clipped()
}

}

目前，周視圖在 ScrollView 中實現為 HStack，但我個人不知道如何使用這 2 個來處理實現。

DateModel 負責在 WorkoutManager 處理鍛煉時跟蹤當前工作日和當前日期，同時將它們保存在 [String: [Workout]] 類型字典中。 鍵的日期格式為“25/05/2022”（嘗試使用日期類型作為鍵，但據我所知這不是可散列的，不知道如何使其可散列，而鍛煉結構現在只有一個標題.

未在周視圖中滑動時看到的主頁選項卡當前滾動/滑動/拖動手勢。

Answer 1

我建議您從第三方庫 CalendarKit 中獲取幫助，或者您可以將其直接集成到您的項目中。 日歷套件

我希望這對你的目標有用。