带有 PageTabViewStyle 的 TabView 上的edgesIgnoringSafeArea 不起作用

Question

使用.tabViewStyle(PageTabViewStyle()) 将 TabView 用作页面查看器可以正常工作，但尝试通过应用 edgesIgnoringSafeArea 让它从边缘运行到边缘似乎不起作用。

我在这里错过了什么？

struct ContentView: View {
    let colors: [Color] = [.red, .green, .blue]
    var body: some View {
        TabView {
            ForEach(0...2, id: \.self) { index in
                Rectangle()
                    .fill(colors[index])
            }
        }
        .tabViewStyle(PageTabViewStyle())
        .edgesIgnoringSafeArea(.all)
    }
}

将另一个 .edgesIgnoringSafeArea(.all) 添加到Rectangle 或ForEach 也不起作用。

请注意，所有这些问题都是不同的，因为它们不使用 use PageTabViewStyle():

• How do I use a TabView with a NavigationView in SwiftUI?
• Adding a TabView makes the Navigation Bar not cover the safe area in SwiftUI
• NavigationView doesn't display correctly when using TabView in SwiftUI
• In my NavigationView '.edgesIgnoringSafeArea' does not move content past the safe area

他们的解决方案（添加edgesIgnoringSafeArea(.all)）在这种情况下不起作用。

Answer 1

1. 从 TabView 中删除 .edgesIgnoringSafeArea(.all)
2. 将框架添加到具有屏幕宽度和高度的 TabView
3. 用 ScrollView 包装 TabView
4. 将 .edgesIgnoringSafeArea(.all) 添加到 ScrollView

struct ContentView: View {
    let colors: [Color] = [.red, .green, .blue]

    var body: some View {
        ScrollView {
            TabView {
                ForEach(0...2, id: \.self) { index in
                    Rectangle()
                        .fill(colors[index])
                }
            }
            .frame(
                width: UIScreen.main.bounds.width ,
                height: UIScreen.main.bounds.height
            )
            .tabViewStyle(PageTabViewStyle())
            
        }
        .edgesIgnoringSafeArea(.all)
    }
}

Answer 2

这是我所拥有的最大数量...无论如何，我认为最初它是一个错误，值得向 Apple 提交反馈。

使用 Xcode 12b 测试

struct TestPagingStyle: View {
    let colors: [Color] = [.red, .green, .blue]
    var body: some View {
        ZStack {
            Color.black.overlay(
                GeometryReader { gp in
                    TabView {
                        ForEach(0..<3, id: \.self) { index in
                            Text("Hello, World \(index)")
                                .frame(width: gp.size.width, height: gp.size.height)
                                .background(colors[index])
                        }
                    }
                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
                }
            )
        }.edgesIgnoringSafeArea(.all)
    }
}

Answer 3

SwiftUI 3.0 更新：

 TabView {
            ForEach(0...2, id: \.self) { index in
                Rectangle()
                    .fill(colors[index])
            }
            .ignoresSafeArea()
        }
        .tabViewStyle(PageTabViewStyle())
        .edgesIgnoringSafeArea(.all)

Answer 4

我通过“扩展”TabView 的高度并将其向顶部“移动”相同的量来解决这个烦人的问题：

struct ContentView: View {
    var body: some View {
        let yExtension: CGFloat = 50
        GeometryReader { g in
            TabView {
                Color.red.overlay(Text("1"))
                Color.green.overlay(Text("2"))
                Color.blue.overlay(Text("3"))
                Color.orange.overlay(Text("4"))
            }
            .frame(width: g.size.width, height: g.size.height + yExtension)
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
            .font(Font.title.bold())
        }
        .offset(y: -yExtension)
        .edgesIgnoringSafeArea(.all)
    }
}

在 Xcode 12.4、iOS 14.4 上测试：