How to use TabView or ScrollView for carousel?
Asked Answered
D

0

10

I'm trying to create a carousel like some of Apple's apps. The TabView has the paged style but it doesn't "peek" at the previous and next elements. The ScrollView(.horizontal) doesn't snap. I'm hoping for a mixture of the two behaviours without rewriting a customer view. Is something like this possible with either of those views:

enter image description here

This is what I'm trying:

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()
    }
}

enter image description here

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())

enter image description here

Dearr answered 6/3, 2021 at 18:0 Comment(1)
You can use this iosexample.com/a-carousel-view-for-swiftuiHanschen

© 2022 - 2025 — McMap. All rights reserved.