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 中，手势可以正确传递到列表并且不会阻止滚动。