Question

我试图创建一个在垂直ScrollView内具有多个水平ScrollView的布局，类似于Apple的Pages应用程序中的模板选择器。我希望水平ScrollView的内容在安全区域之外可见。但是我似乎无法获取水平安全插入物之外的垂直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)
    }
}

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

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

1 个答案: