SwiftUI中PageTabViewStyle下TabView索引高度及自定义问题

1. 无法直接获取系统Page索引的高度 #

系统的PageIndexViewStyle没有公开API可以直接获取其高度，它的尺寸是跟随系统设计规范自适应的，不同设备、系统版本下都会有差异。临时用padding或ignoresSafeArea的方式确实无法适配所有场景，更可靠的做法是自定义底部索引栏，完全把控其尺寸和布局逻辑。

2. 自定义可显示完整标签的底部索引栏 #

如果想保留PageTabViewStyle的滚动切换体验，可以保留TabView的页面切换逻辑，替换掉默认的索引视图，用自定义HStack实现带文字的标签栏——这样既能控制高度，又能完整显示6个标签：

struct CustomTabContainer: View {
    @State private var selectedTab = 0
    private let tabItems = [
        (title: "ByEye", icon: "eye"),
        (title: "Chart", icon: "square.grid.4x3.fill"),
        (title: "List", icon: "list.bullet"),
        (title: "Edit", icon: "square.and.pencil"),
        (title: "Camera", icon: "camera"),
        (title: "Settings", icon: "gear")
    ]
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // 保留Page风格的TabView，隐藏系统默认索引
            TabView(selection: $selectedTab) {
                ForEach(0..<tabItems.count, id: \.self) { index in
                    switch index {
                    case 0: ByEyeView()
                    case 1: ChartView()
                    case 2: ListView()
                    case 3: EditView()
                    case 4: CameraView()
                    case 5: SettingsView()
                    default: EmptyView()
                    }
                }
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            
            // 自定义底部标签栏
            VStack {
                Divider()
                HStack(spacing: 0) {
                    ForEach(0..<tabItems.count, id: \.self) { index in
                        Button {
                            selectedTab = index
                        } label: {
                            VStack(spacing: 4) {
                                Image(systemName: tabItems[index].icon)
                                    .font(.system(size: 20))
                                Text(tabItems[index].title)
                                    .font(.caption)
                            }
                            .foregroundColor(selectedTab == index ? .blue : .gray)
                            .frame(maxWidth: .infinity)
                            .padding(.vertical, 8)
                        }
                    }
                }
                .background(Color(.systemBackground))
            }
            .ignoresSafeArea(edges: .bottom)
        }
    }
}

3. 解决内容遮挡问题 #

自定义标签栏后，你可以直接确定它的高度（比如上面示例中整体高度约60），然后给TabView内的所有页面添加统一的底部安全区偏移，适配所有设备和方向：

在TabView的子视图中添加：

.safeAreaInset(edge: .bottom) {
    Color.clear.frame(height: 60) // 高度与自定义标签栏一致
}

这样页面内容会自动避开底部标签栏，无需手动调整padding。

4. 关于默认PageTabViewStyle的限制 #

系统的PageIndexViewStyle设计定位是轻量页面指示器，仅支持显示少量图标，超过数量会自动简化，且不支持显示标签文字——所以你设置的labelStyle和frame会被忽略是正常的，属于系统组件的设计限制。

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