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

Question

通过 using 将 TabView 用作页面查看器.tabViewStyle(PageTabViewStyle())可以正常工作，但尝试通过应用使其从边缘运行到边缘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)到RectangleorForEach也不起作用。

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

• 如何在 SwiftUI 中将 TabView 与 NavigationView 一起使用？
• 添加 TabView 使导航栏无法覆盖 SwiftUI 中的安全区域
• 在 SwiftUI 中使用 TabView 时，NavigationView 无法正确显示
• 在我的 NavigationView 中，'.edgesIgnoringSafeArea' 不会将内容移动到安全区域之外

他们的解决方案（添加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

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 上测试：

Answer 4

SwiftUI 3.0 更新：

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