使用垂直 ScrollView 忽略水平安全区域

Posted 2023-02-24

【中文标题】使用垂直 ScrollView 忽略水平安全区域

【英文标题】：Ignore horizontal safe area with vertical ScrollView

【发布时间】：2020-06-30 20:54:40

【问题描述】：

我正在尝试在垂直 ScrollView 内创建一个具有多个水平 ScrollView 的布局，类似于 Apple 的 Pages 应用程序中的模板选择器。我希望水平 ScrollViews 的内容在安全区域之外可见。但是，我似乎无法在水平安全插图之外获取垂直 ScrollView 的内容。在横向使用带有凹槽的 iPhone 时，可以看到这一点。

我尝试在垂直 ScrollView 的内容中添加负填充。这种方法可行，但在纵向模式下使用设备时会产生问题。

下面的示例代码显示了该问题。我希望矩形在水平滚动时在安全区域之外可见，但它们会被剪裁。如何使它们在安全区域之外可见？

import SwiftUI

struct ContentView: View 
    var body: some View 
        ScrollView(.vertical) 
            ScrollView(.horizontal) 
                HStack 
                    Rectangle()
                    .frame(width: 200, height: 300)
                    
                    Rectangle()
                    .frame(width: 200, height: 300)
                    
                    Rectangle()
                    .frame(width: 200, height: 300)
                
               .edgesIgnoringSafeArea(.horizontal)
           .edgesIgnoringSafeArea(.horizontal)
    

【问题讨论】：

使用 Xcode 12/ios 14按原样工作。

@Asperi 放弃对 的支持是一个选项。但我真的希望有一个可以接受的解决方法......

【参考方案1】：

您可以检测设备的方向何时发生变化并调整您的视图：

struct ContentView: View 
    @Environment(\.verticalSizeClass) var verticalSizeClass

    var body: some View 
        Group 
            if verticalSizeClass == .compact 
                content.edgesIgnoringSafeArea(.horizontal)
             else 
                content
            
        
    

    var content: some View 
        ScrollView(.vertical) 
            ScrollView(.horizontal) 
                HStack 
                    Rectangle()
                        .frame(width: 200, height: 300)

                    Rectangle()
                        .frame(width: 200, height: 300)

                    Rectangle()
                        .frame(width: 200, height: 300)
                
            
        
        .edgesIgnoringSafeArea(.horizontal)
    

【讨论】：

将垂直滚动视图包装在视图（内容）中就可以了！不幸的是，为不同大小的类创建不同的视图会在旋转设备时产生非常难看的过渡。如果每个尺寸类别没有不同的视图，当从横向过渡到纵向时，插图就会变得混乱......