SwiftUI 覆盖阻止列表滚动事件

Question

我想在 SwiftUI 的列表顶部放置一个半透明图像叠加层。
我试过这样的代码:

struct ContentView: View {
    var body: some View {
        List {
            Text("first")
            Text("second")
            Text("third")
        }
        .overlay(
            Image(systemName: "hifispeaker")
                .resizable()
                .frame(width: 200, height: 200)
                .opacity(0.15)
        )
    }
}

它看起来像预期的那样，但是如果您将手指放在图像边界内，则列表的滚动不起作用(如果您尝试在图像外滚动它可以正常工作)

我尝试添加 .allowsHitTesting(false)在不透明度之后，但它不会改变任何东西。

使用 ZStack而不是 overlay也没有帮助。我发现的唯一解决方法是使用 ZStack , 将图像放在列表后面并使列表半透明，但这不是我正在寻找的解决方案(它稍微改变了列表的颜色并导致一些动画问题)。

有没有办法让它工作？就像让图像在后台将事件传递给列表一样。

Answer 1

这绝对看起来像是一个 SwiftUI 错误。我遇到了同样的问题，并且能够找到解决方法。

struct ContentView: View {
    var body: some View {
        List {
            Text("first")
            Text("second")
            Text("third")
        }
        .overlay(
            ScrollView {
                Image(systemName: "hifispeaker")
                    .resizable()
                    .frame(width: 200, height: 200)
                    .opacity(0.15)
            }
            .frame(width: 200, height: 200)
            .disabled(true)
        )
    }
}

通过使用 .disabled(true) 将您的叠加层嵌入到 ScrollView 中修饰符，手势正确传递到列表并且不会阻止滚动。