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

Question

通过 using 将 TabView 用作 pageviewer.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 中使用带有 NavigationView 的 TabView？
• 添加 TabView 使 Navigation Bar 无法覆盖 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

SwiftUI 3.0 中的更新：

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

Answer 3

按照 @kimigori 的建议将 TabView 包裹在 ScrollView 中是可行的，但会导致页面点变得可滚动。要将它们固定到位，请使用水平 ScrollView。

这是一个可重复使用的 PageView，适用于ignoresSafeArea(_:edges:)：

struct PageView<Content: View>: View {
    let content: () -> Content

    var body: some View {
        GeometryReader { geo in
            ScrollView(.horizontal) {
                TabView {
                    content()
                }
                .frame(width: geo.size.width, height: geo.size.height)
                .tabViewStyle(PageTabViewStyle())
            }
        }
    }

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }
}

例子：

测试页面查看 gif

struct TestPageView: View {
    var body: some View {
        PageView {
            ForEach(0...2, id: \.self) { index in
                ZStack {
                    Rectangle()
                        .fill([.red, .green, .blue][index])
                    Text("Page \(index + 1)")
                }
            }
        }
        .ignoresSafeArea()
    }
}

Answer 4

这是我得到的最多的信息……无论如何，我认为最初这是一个错误，值得向苹果提交反馈。

使用 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 5

偶然发现这个，希望对其他人有用。适用于 iOS15 和 16，YMMV。

为 TabView 添加背景颜色：

TabView(selection: $index) {
    YourTabViewContent
    .ignoresSafeArea()
}
.background(Color.background)
.tabViewStyle(.page(indexDisplayMode: .never))
.edgesIgnoringSafeArea(.all)