SwiftUI TabView 页面样式横向动画偏离中心问题详解与修复

2024-03-27 02:41:52

TabView 页面样式和横向动画偏离中心问题

问题介绍

在 SwiftUI 中使用.tabViewStyle(.page)样式的TabView时，页面内容可能会在使用横向动画（如.move(), .slide()或.offset())时偏离中心。这在启用Touch ID的设备中表现得尤为明显。

修复方法

该问题可以通过以下方法修复：

忽略安全区域： 在TabView上应用.ignoresSafeArea(edges: .horizontal)，让页面内容延伸到安全区域之外。
更改动画类型： 将动画类型更改为easeInOut，这有助于减少动画过程中过渡的抖动。
删除内边距： 删除父视图（例如VStack)中的内边距，以避免它影响页面内容的位置。

解决方案图例

以下代码片段展示了已修复的代码：

import SwiftUI

struct ContentView: View {
    @State private var showTabView = false
    var body: some View {
        VStack {
            Button("Toggle TabView") {
                showTabView.toggle()
            }
            if showTabView {
                TabView {
                    Text("Page One")
                    Text("Page Two")
                }
                .tabViewStyle(.page)
                .transition(.slide.easeInOut)
                .ignoresSafeArea(edges: .horizontal)
            }
        }
        .animation(.default, value: showTabView)
    }
}