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

Question

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

我已经尝试在垂直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)
    }
}

Answer 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)
    }
}