SwiftUI中如何实现带自定义视图的可滑动分段控制器？

我有一个包含两个分段的分段控制器（详见图片：），希望实现用户通过左右滑动在两个分段间切换，并显示对应视图的功能。我查阅了多篇文章，但未找到合适的实现方案。

我已使用按钮实现了分段切换功能，但不确定如何添加滑动交互。

现有代码如下：

struct ScheduleView: View {
    // MARK: - Variables
    @State private var playerName: String = ""
    @State private var pastShown: Bool = false
    @State private var presentAlert: Bool = false
    @State private var goToGroupChat: Bool = false
    private var items = ["Upcoming", "Past"]
    
    var body: some View {
        NavigationView {
            ZStack {
                VStack {
                    HStack {
                        VStack(alignment: .leading) {
                            Text("Hello!,")
                                .robotoRegularFont(size: 14)
                                .foregroundColor(Color.custom64B054Color)
                            Text("John Andrew")
                                .robotoRegularFont(size: 14)
                                .foregroundColor(Color.custom333333Color)
                        }
                        Spacer()
                        Image("appIcon_icon")
                            .resizable()
                            .frame(width: 32, height: 32)
                    }
                    .padding(.top, 24)
                    
                    // MARK: - Upcoming and Past Views
                    VStack(spacing: 8) {
                        HStack(alignment: .center, spacing: 0) {
                            Spacer()
                            
                            // MARK: - Button Upcoming
                            ZStack {
                                Button {
                                    print("Upcoming action")
                                    self.pastShown = false
                                } label: {
                                    Text("Upcoming")
                                        .font(.custom(self.pastShown ? "Roboto-Light" : "Roboto-Medium", size: 15))
                                        .foregroundColor(self.pastShown ? .black.opacity(0.7) : .black)
                                }
                            }
                            .frame(width: UIScreen.main.bounds.width / 2 - 18)
                            Spacer()
                            Spacer()
                            
                            // MARK: - Button Past
                            ZStack {
                                Button {
                                    print("Past action")
                                    self.pastShown = true
                                } label: {
                                    Text("Past")
                                        .font(.custom(self.pastShown ? "Roboto-Medium" : "Roboto-Light", size: 15))
                                        .foregroundColor(self.pastShown ? .black : .black.opacity(0.7))
                                }
                            }
                            .frame(width: UIScreen.main.bounds.width / 2 - 18)
                            Spacer()
                        }
                        
                        let upcoming = Capsule()
                            .fill(Color.black.opacity(self.pastShown ? 0.2 : 1))
                            .frame(maxWidth: .infinity, maxHeight: 1.5)
                        let past = Capsule()
                            .fill(Color.black.opacity(self.pastShown ? 1 : 0.2))
                            .frame(maxWidth: .infinity, maxHeight: 1.5)
                        
                        HStack(alignment: .center, spacing: 0) {
                            upcoming
                            past
                        }
                    }
                    .padding(.top, 8)
                    .padding(.horizontal, -18)
                    
                    ScrollView(.vertical, showsIndicators: false) {
                        // MARK: - Past View
                        if self.pastShown {
                            Text("past")
                        } else {
                            // MARK: - Upcoming View
                            LazyVStack(spacing: 20) {
                                MatchInfoCell(playerType: "Doubles", skillRange: "minimum", noOfParticipants: "2/4", date: "Tues, Oct 25", time: "04:00 PM", court: "Tour Greens Houston Serves The Houston Area", isForSchedule: true, lookingButtonAction: {
                                    print("lookingButtonAction")
                                }, gameOnButtonAction: {
                                    print("gameOnButtonAction")
                                }, noGameButtonAction: {
                                    print("noGameButtonAction")
                                }, messageButtonAction: {
                                    print("messageButtonAction")
                                    self.goToGroupChat.toggle()
                                }, addGuestButtonAction: {
                                    print("addGuestButtonAction")
                                    withAnimation {
                                        self.presentAlert.toggle()
                                    }
                                })
                            }
                        }
                    }
                    .padding(.top)
                    .background(Color.clear)
                }
                .padding(.horizontal, 18)
                
                // MARK: - Custom Alert for Add Guest
                if self.presentAlert {
                    VStack {
                        CustomAlertView(alertTitle: "Are you sure you want to add a Guest in this match?", nonFilledButtonTitle: "No", filledButtonTitle: "Yes", nonFilledButtonAction: {
                            withAnimation {
                                self.presentAlert.toggle()
                            }
                        }, filledButtonAction: {
                            withAnimation {
                                self.presentAlert.toggle()
                            }
                        }, presentAlert: $presentAlert)
                    }
                }
                
                // MARK: - Navigate to Group Chat
                NavigationLink("", destination: GroupChatView().navigationBarHidden(true).navigationBarBackButtonHidden(true), isActive: $goToGroupChat)
            }
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
        }
    }
}

若有人能提供实现该功能的指导，我将不胜感激！
谢谢！

内容的提问来源于stack exchange，提问作者Dimpy-iRoid