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

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