SwiftUI tabViewStyle PageView模式竖屏转横屏时功能失效问题求解

DevOps 小满

2026-9-30

SwiftUI PageTabView 转屏索引错乱修复方案

核心问题根因

示例代码本身存在两处干扰TabView状态维护的错误写法，配合系统PageTabView自身的适配缺陷共同导致了转屏索引错乱：

外层包裹了无作用的ScrollView，转屏时容器尺寸变化会干扰TabView内部的偏移量计算
TabView添加了.id(UUID())修饰符，每次视图重绘（包含转屏触发的布局更新）都会强制销毁旧TabView、重建全新实例，直接丢失当前索引状态

修正后完整代码

import SwiftUI

struct ContentView: View {
    // 可选绑定页码，用于主动控制跳转，系统会自动维护状态正确性
    @State private var currentPage = 0
    
    var body: some View {
        ZStack {
            TabView(selection: $currentPage) {
                Text("Hello 1")
                    .tag(0)
                Text("Hello 2")
                    .tag(1)
                Text("Hello 3")
                    .tag(2)
                Text("Hello 4")
                    .tag(3)
            }
            .tabViewStyle(.page(indexDisplayMode: .always))
            .ignoresSafeArea()
            .transition(.move(edge: .bottom))
        }
        // 可选：添加转屏动画，让切换效果更顺滑
        .animation(.easeInOut, value: currentPage)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}