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

Posted 2023-03-11

【中文标题】SwiftUI TabView 与 PageTabViewStyle 在设备上的横向与 safeArea 添加奇数前沿插图

【英文标题】：SwiftUI TabView with PageTabViewStyle in Landscape on device with safeArea adding odd leading edge inset

【发布时间】：2021-10-14 00:03:10

【问题描述】：

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

struct ContentView: View 

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

【参考方案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 可以垂直滚动，但会弹回。

【讨论】：

不知道为什么它有效，但它确实有效。非常感谢。很棒的解决方案。

我把它全部放在 GeometryReader 中并使用尺寸代理而不是使用 UIScreen 但结果相同。再次感谢。

也可以通过 ScrollView(.horizo​​ntal) 摆脱弹跳问题

【参考方案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())