SwiftUI TabView分页：滑动时中间视图始终被覆盖的可行性问询

要实现你想要的效果，不能直接用原生PageTabViewStyle包含三个页面（原生分页会逐页滑动，中间视图会被滑入滑出）。我们可以通过分层布局来实现：把中间视图固定在底层，上层放置仅包含左右视图的分页容器，配合自定义标签栏控制切换，这样滑动左右视图时，中间视图会一直被上层内容覆盖。

完整实现代码 #

struct ContentView: View {
    @State private var selection = 0
    
    var body: some View {
        ZStack {
            // 始终处于底层的中间视图
            Text("Middle View")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(.gray.opacity(0.2))
            
            // 上层的左右分页视图：选中中间标签时隐藏
            TabView(selection: $selection) {
                Text("Left View")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(.blue.opacity(0.8))
                    .tag(0)
                
                Color.clear // 中间标签对应的占位页面
                    .tag(1)
                
                Text("Right View")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(.green.opacity(0.8))
                    .tag(2)
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .opacity(selection != 1 ? 1 : 0)
            .animation(.easeInOut, value: selection)
        }
        .overlay(alignment: .bottom) {
            // 自定义底部标签栏
            HStack(spacing: 0) {
                TabBarButton(icon: "1.circle", title: "Left", isSelected: selection == 0) {
                    selection = 0
                }
                
                TabBarButton(icon: "2.circle", title: "Middle", isSelected: selection == 1) {
                    selection = 1
                }
                
                TabBarButton(icon: "3.circle", title: "Right", isSelected: selection == 2) {
                    selection = 2
                }
            }
            .background(.white)
            .padding(.bottom)
        }
    }
}

// 复用的标签栏按钮组件
struct TabBarButton: View {
    let icon: String
    let title: String
    let isSelected: Bool
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            VStack(spacing: 4) {
                Image(systemName: icon)
                    .font(.title2)
                Text(title)
                    .font(.caption)
            }
            .foregroundColor(isSelected ? .accentColor : .gray)
            .frame(maxWidth: .infinity)
            .padding(.vertical, 8)
        }
    }
}

实现逻辑说明 #

1. 分层布局：

   • ZStack最底层是固定的中间视图，无论切换到左/右视图，它都会处于被覆盖的状态。
   • 上层是仅包含左、右视图的TabView，使用PageTabViewStyle实现分页滑动效果。

2. 标签栏控制：

   • 自定义底部标签栏，点击不同标签时切换selection状态：
     • 选中左/右标签时，上层分页视图显示对应内容，完全覆盖底层中间视图。
     • 选中中间标签时，上层分页视图透明度变为0，显示出底层的中间视图。

3. 动画过渡：

   • 为selection添加动画，让视图切换和透明度变化更流畅自然。

可调整细节 #

• 如果需要完全隐藏中间视图（而非半透明覆盖），可以将左/右视图的背景改为不透明颜色（比如.blue而非.blue.opacity(0.8)）。
• 若想保留原生系统标签栏样式，可以将自定义标签栏替换为原生TabView的tabItem，但需要调整上层分页视图的逻辑来匹配标签切换。

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