SwiftUI 如何跟踪 PageTabViewStyle 中的页面索引？

Question

我正在尝试跟踪用户在 SwiftUI 中的 TabView 即 PageTabViewStyle 中的哪个页面，但我无法找到跟踪的最佳方法页面索引？使用 .onAppear 效果不佳，因为它会被多次调用，即使不在屏幕上也会调用第 2 和 3 页。

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

Answer 1

您可以将 selection 绑定传递给 TabView 并使用 tag 来识别页面：

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

请注意，在您的原始代码中，它总是会说当前页面 = 0，因为您没有将 pageIndex 变量插入字符串

SwiftUI 如何跟踪 PageTabViewStyle 中的页面索引？

SwiftUI how to keep track of page index in PageTabViewStyle?

ios

swift

swiftui

swiftui-tabview