SwiftUI how to keep track of page index in PageTabViewStyle?

Question

I'm trying to keep track of what page the user is on in a TabView that is PageTabViewStyle in SwiftUI but I can't figure out the best way to keep track of the page index? Using .onAppear doesn't work well as it gets called multiple times and pages 2 and 3 get called even when not on the screen. 🤔

@State var pageIndex = 0 var body: some View { VStack { Text("current page = \(0) ") TabView { Text("First") .onAppear { pageIndex = 0 } Text("Second") .onAppear { pageIndex = 1 } Text("Third") .onAppear { pageIndex = 2 } } .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)) } } }

jnpdx · Accepted Answer · 2021-03-07 22:31:25Z

21

You can pass a selection binding to the TabView and use tag to identify the pages:

struct ContentView: View { @State var pageIndex = 0 var body: some View { VStack { Text("current page = \(pageIndex) ") TabView(selection: $pageIndex) { Text("First").tag(0) Text("Second").tag(1) Text("Third").tag(2) } .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)) } } }

Note that in your original code, it was always going to say current page = 0 because you weren't interpolating the pageIndex variable into the string

answered Mar 7, 2021 at 22:31

jnpdx

53.3k7 gold badges91 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rikh Over a year ago

I would recommend using enums just to make it look cleaner :)

swiftPunk Over a year ago

@Rikh: you mean using enum in tag and instead of Integer, right?

Rikh Over a year ago

Yep! Enum to keep track of current tab as well. Kinda like @State private var current : Tabs

jnpdx Over a year ago

Yes, that is certainly an option. Not sure how much 'cleaner' it looks since unfortunately the tag() doesn't do type inference based on the selection type. Maybe in a future version of SwiftUI. I went with Int because that's what the OP's question was set up as.

Big_Chair Over a year ago

Wow this is great. I thought the tag was only a reference for the developer and I'd have to get and translate it into the $pageIndex somehow, but it already does that!

|

Tim Isenman · Accepted Answer · 2022-07-10 17:50:50Z

If you want to be able to get the current page/index and act on that data, what I found useful is using the .onChange() modifier on the view, like so.

TabView(selection: $currentIndex) { Text("First view") .tag(0) Text("Middle view") .tag(1) Text("Last view") .tag(2) } .tabViewStyle(.page(indexDisplayMode: .never)) .onChange(of: currentIndex) { newValue in print("New page: \(newValue)") }

Hope that helps!

Collectives™ on Stack Overflow

SwiftUI how to keep track of page index in PageTabViewStyle?

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related