如何使用 TabView 或 ScrollView 进行轮播？

Question

我正在尝试创建一个类似于 Apple 的某些应用程序的轮播。 TabView 具有分页样式，但它不会“窥视”上一个和下一个元素。 ScrollView(.horizontal) 不会卡住。我希望在不重写客户视图的情况下混合两种行为。使用这些视图中的任何一个都可能发生这样的事情：

这就是我正在尝试的：

ScrollView(.horizontal, showsIndicators: false) {
    HStack(alignment: .center, spacing: 0) {
        GroupBox(label: Text("This is the title 1")) {
            Label("Some item 1", systemImage: "checkmark.circle.fill")
            Label("Some item 2", systemImage: "checkmark.circle.fill")
            Label("Some item 3", systemImage: "checkmark.circle.fill")
            Label("Some item 4", systemImage: "checkmark.circle.fill")
        }
        .padding()
        GroupBox(label: Text("This is the title 2")) {
            Label("Some item 1", systemImage: "checkmark.circle.fill")
            Label("Some item 2", systemImage: "checkmark.circle.fill")
            Label("Some item 3", systemImage: "checkmark.circle.fill")
            Label("Some item 4", systemImage: "checkmark.circle.fill")
        }
        .padding()
        GroupBox(label: Text("This is the title 3")) {
            Label("Some item 1", systemImage: "checkmark.circle.fill")
            Label("Some item 2", systemImage: "checkmark.circle.fill")
            Label("Some item 3", systemImage: "checkmark.circle.fill")
            Label("Some item 4", systemImage: "checkmark.circle.fill")
        }
        .padding()
    }
}

TabView {
    GroupBox(label: Text("This is the title 1")) {
        Label("Some item 1", systemImage: "checkmark.circle.fill")
        Label("Some item 2", systemImage: "checkmark.circle.fill")
        Label("Some item 3", systemImage: "checkmark.circle.fill")
        Label("Some item 4", systemImage: "checkmark.circle.fill")
    }
    .padding()
    GroupBox(label: Text("This is the title 2")) {
        Label("Some item 1", systemImage: "checkmark.circle.fill")
        Label("Some item 2", systemImage: "checkmark.circle.fill")
        Label("Some item 3", systemImage: "checkmark.circle.fill")
        Label("Some item 4", systemImage: "checkmark.circle.fill")
    }
    .padding()
    GroupBox(label: Text("This is the title 3")) {
        Label("Some item 1", systemImage: "checkmark.circle.fill")
        Label("Some item 2", systemImage: "checkmark.circle.fill")
        Label("Some item 3", systemImage: "checkmark.circle.fill")
        Label("Some item 4", systemImage: "checkmark.circle.fill")
    }
    .padding()
}
.tabViewStyle(PageTabViewStyle())