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

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

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

解决方法：在设备尺寸.frame上设置 a ，但将其全部放在 a 中并在其上放置：TabViewScrollView.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可以垂直滚动，但它会弹回。

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