SwiftUI中TabView采用page样式时索引指示器不显示问题

问题 #

我有一个结构简单的TabView，设置了.tabViewStyle为.page样式。根据我的认知，该样式的索引指示器应显示在视图底部，但目前并未出现。当前页面的滑动功能正常，可左右切换页面，但缺少预期的分页圆点，导致无法知晓总页数及当前所处的页面位置。

对应的视图代码：

struct PageView: View {
    @State private var selectedPage = 0
    let items: [String]
    
    var body: some View {
        TabView {
            ForEach(items, id: \.self) { item in
                    Text(item)
                    .tabItem {
                        Text(item)
                    }
                    .tag(item)
            }
            .navigationTitle("Learning")
        }
        .tabViewStyle(.page(indexDisplayMode: .always))
    }
}

#Preview {
    NavigationStack {
        PageView(
            items: [
                "Foo", "Bar", "Buzz"
            ]
        )
            .navigationTitle("Page View")
    }
}

解决方案 #

问题出在两个核心点：

• .tabItem是给底部标签栏样式的TabView设计的，分页样式（PageTabViewStyle）不需要这个修饰符，它会干扰分页指示器的渲染逻辑。
• selectedPage的类型为Int，但子视图设置的tag是String类型（即item的值），两者类型不匹配，导致分页指示器无法正确关联当前选中页。

修正步骤：

1. 移除所有子视图中的.tabItem { Text(item) }代码。
2. 调整tag类型与selectedPage保持一致，推荐用数组索引作为tag，更贴合分页场景的逻辑：

修正后的完整代码：

struct PageView: View {
    @State private var selectedPage = 0
    let items: [String]
    
    var body: some View {
        TabView(selection: $selectedPage) {
            ForEach(Array(items.enumerated()), id: \.element) { index, item in
                Text(item)
                    .tag(index) // 使用索引作为tag，与selectedPage的Int类型匹配
            }
        }
        .navigationTitle("Learning")
        .tabViewStyle(.page(indexDisplayMode: .always))
    }
}

#Preview {
    NavigationStack {
        PageView(
            items: [
                "Foo", "Bar", "Buzz"
            ]
        )
        .navigationTitle("Page View")
    }
}

修改完成后，分页圆点指示器会正常显示在视图底部，同时selectedPage也能准确反映当前选中的页面索引。

内容的提问来源于stack exchange，提问作者appfrosch