SwiftUI TabView with PageTabViewStyle in Landscape on device with safeArea adding odd leading edge insets

Question

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

struct ContentView: View {

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

Answer 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 可以垂直滚动，但它会 spring 返回。

Answer 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())
    }
}

SwiftUI TabView with PageTabViewStyle in Landscape on device with safeArea adding odd leading edge insets

SwiftUI TabView with PageTabViewStyle in Landscape on device with safeArea adding odd leading edge inset

xcode

ios

swiftui

swiftui-tabview