滚动视图自然超出安全区域？

Question

我期待滚动视图能够尊重安全区域。为什么不在这里呢？什么是

scrollClipDisabled

？

struct ContentView: View {
    
    var body: some View {
        ZStack {
            Color.red
            PrimaryView()
                .scrollClipDisabled(false)
        }
    }
}

struct PrimaryView: View {
    
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(0...100, id: \.self) { _ in
                    hello
                }
            }
            .padding()
        }
    }
    
    private var hello: some View {
        HStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
    }
}

Answer 1

我同意，

ScrollView

似乎决心忽略安全区域边缘，这似乎很奇怪，即使您按照当前方式设置

.scrollClipDisabled(false)

。如果你在

ScrollView

上添加一个框架，你会看到框架正在观察安全区域边缘，但可滚动内容却不是：

ScrollView(.horizontal) {
    // ...
}
.border(.blue)

作为解决方法，请将

.clipShape

添加到

ScrollView

：

PrimaryView()
    .scrollClipDisabled(false)
    .clipShape(Rectangle()) // 👈 HERE