旋转期间不考虑 SwiftUI TabView 插入

Question

对于 Carousel 自定义组件，我们使用具有以下修饰符的 TabView：

.tabViewStyle(.page(indexDisplayMode: .never))

一切都工作得很好，除了在旋转处理过程中，底部出现奇怪的底部插图：

通过“调试”视图更深入地查看，我们发现顶部原点错误地翻译了大约 10px。

附上重现问题的代码片段，运行 Xcode15.2 和 iOS17.2：

import SwiftUI

@main
struct TabViewDemoIssueApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .ignoresSafeArea(.all, edges: .all)
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView {
            Rectangle().foregroundColor(.red)
                .ignoresSafeArea(.all, edges: .all)
            Rectangle().foregroundColor(.yellow)
            .ignoresSafeArea(.all, edges: .all)
        }
        .ignoresSafeArea(.all, edges: .all)
        .background(.green)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .tabViewStyle(.page(indexDisplayMode: .never))
    }
}

#Preview {
    ContentView()
}

更新：我们向 Apple 开放了一个错误：FB13526097

Answer 1

我看了一下并想出了一个解决方案。这确实是一个解决方法，这是我在短时间内能想到的最好的方法。我也很困惑为什么你的观点会这样。因此，我所做的是检测设备旋转，如果设备不是处于纵向模式，则应用小规模的凹凸。这是代码：

    // Our custom view modifier to track rotation and call our action
struct DeviceRotationViewModifier: ViewModifier {
    let action: (UIDeviceOrientation) -> Void
    
    func body(content: Content) -> some View {
        content
            .onAppear()
            .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
                action(UIDevice.current.orientation)
            }
    }
}

// A View wrapper to make the modifier easier to use
extension View {
    func onRotate(perform action: @escaping (UIDeviceOrientation) -> Void) -> some View {
        self.modifier(DeviceRotationViewModifier(action: action))
    }
}

然后您可以像这样编辑视图：

TabView {
        Rectangle().foregroundColor(.red)
            .ignoresSafeArea(.all, edges: .all)
        Rectangle().foregroundColor(.yellow)
            .ignoresSafeArea(.all, edges: .all)
    }
    .scaleEffect(orientation != .portrait ? 1.06 : 1, anchor: .center)
    .ignoresSafeArea(.all, edges: .all)
    .background(.green)
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .tabViewStyle(.page(indexDisplayMode: .never))
    .onRotate { newOrientation in
        orientation = newOrientation
    }

请告诉我这是否对您有用，我知道这是一个解决方法。