BLACK FRIDAY SALE: Save big on all my Swift books and bundles! >>

TabView as horizontal paged list. Two issues

Forums > SwiftUI

I use a TabView to simulate a horizontal scrolling paged list. This work fine. But I want to change the background, according to the currently active tab. I utilise .onAppear() for this, but this results in the images not being in sync with the item in the current tab (see video:

basically, it should only change the background whenever the tab is 'fully' selected and centered on screen. Not as soon as the next or previous tab comes onto screen just a few pixels.

Secondly, I want to be able to set the selected programmatically, for instance after I insert a new object, I want to select the first tab. How Can I achieve that. The tabs have the id of my item (game) as tag.

Relevant code:

    @ViewBuilder var tabList: some View {
        TabView {
            ForEach( { game in
                GameCardView(game: game)
                    .onAppear {
                        withAnimation(.easeInOut) {
                            backgroundImage = gamesViewModel.getGameImageCoreData(for: game)
                    .frame(width: getScreenRectangle().width - 20)
                    .onTapGesture { showAnnotationsView(for: game) }
                    .onLongPressGesture(minimumDuration: 0.15) { gameDetailsView(for: game) }
        .tabViewStyle(.page(indexDisplayMode: .never))




Hacking with Swift is sponsored by RevenueCat

SPONSORED In-app subscriptions are a pain to implement, hard to test, and full of edge cases. RevenueCat makes it straightforward and reliable so you can get back to building your app. Oh, and it's free if your app makes less than $10k/mo.

Learn more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

Unknown user

You are not logged in

Log in or create account

Link copied to your pasteboard.