SwiftUI TabView 与 PageTabViewStyle 在设备上的横向与 safeArea 添加奇数前沿插图答案

【问题标题】：SwiftUI TabView with PageTabViewStyle in Landscape on device with safeArea adding odd leading edge insetSwiftUI TabView 与 PageTabViewStyle 在设备上的横向与 safeArea 添加奇数前沿插图
【发布时间】：2021-10-14 00:03:10
【问题描述】：

我有一个带有 PageTabViewStyle 的 TabView，当我的设备处于横向时，前缘有一个奇怪的插图。这在没有安全区域的设备上不存在，并且在纵向的任何边缘上也不存在。

struct ContentView: View {

    var body: some View {
        TabView {
            Color.red
                .edgesIgnoringSafeArea(.all)
        }
        .tabViewStyle(PageTabViewStyle())
        .edgesIgnoringSafeArea(.all)
    }
}

【问题讨论】：

标签： ios xcode swiftui swiftui-tabview

【解决方案1】：

那将是 TabView 这样做。这实际上是“先前”视图，对于您的设置来说，这将是一个空视图。您可以查看是否在横向运行此代码：

var body: some View {
    TabView {
        Color.red
            .edgesIgnoringSafeArea(.all)
        Color.green
            .edgesIgnoringSafeArea(.all)
        Color.blue
            .edgesIgnoringSafeArea(.all)
    }
    .tabViewStyle(PageTabViewStyle())
    .edgesIgnoringSafeArea(.all)
}

然后滑动到下一个视图。你会看到屏幕的那部分变成了红色。再次滑动，它变成蓝色。

解决方法：在TabView 上设置一个.frame，即设备大小，但所有这些都在一个ScrollView 中，并在其上放置一个.edgesIgnoringSafeArea(.all)：

var body: some View {
    ScrollView {
        TabView {
            Color.red
            Color.green
            Color.blue
        }
        .frame(
            width: UIScreen.main.bounds.width ,
            height: UIScreen.main.bounds.height
        )
        .tabViewStyle(PageTabViewStyle())
    }
    .edgesIgnoringSafeArea(.all)
}

是的，TabView 可以垂直滚动，但会弹回。

【讨论】：

不知道为什么它有效，但它确实有效。非常感谢。很棒的解决方案。
我把它全部放在 GeometryReader 中并使用尺寸代理而不是使用 UIScreen 但结果相同。再次感谢。
也可以通过 ScrollView(.horizontal) 摆脱弹跳问题

【解决方案2】：

如果你只想全屏显示背景，试试这样：

var body: some View {
    ZStack {
        // Background ignoring safe area
        LinearGradient(colors: [Color(hue: 0.106, saturation: 0.234, brightness: 0.922, opacity: 1.0), Color.white], startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.all)
        // TabView
        TabView() {
            Onboarding1()
            Onboarding2()
            Onboarding3()
        }
        .tabViewStyle(PageTabViewStyle())
    }
}

【讨论】：