SwiftUI 覆盖阻止列表滚动事件 [英] SwiftUI overlay blocking List scroll events

问题描述

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

I'd like to put a semi-transparent image overlay on top of the list in SwiftUI. I've tried the code like this:

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

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

It looks as expected, but if you place your finger within image boundaries the scrolling of the list doesn't work (if you try to scroll outside the image it works fine)

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

I've tried to add .allowsHitTesting(false) right after opacity, but it doesn't change anything.

使用 ZStack 而不是 overlay 也无济于事.我发现的唯一解决方法是使用 ZStack，将图像放在列表后面并使列表半透明，但这不是我正在寻找的解决方案(它改变了稍微列出并导致一些动画问题).

Using ZStack instead of overlay doesn't help too. The only workaround I've found is to use ZStack, place the image behind the list and make the list semi-transparent, but it's not the solution I'm looking for (it changes the colors of the list slightly and causes some issues with animations).

有没有办法让它工作?比如让图片在后台将事件传递给列表什么的.

Is there a way to make it work? Like making the image pass events to the list in the background or something.

推荐答案

这绝对是一个 SwiftUI 错误.我遇到了同样的问题，并找到了解决方法.

This definitely seems like a SwiftUI bug. I encountered the same issue and was able to find a workaround.

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

By embedding your overlay in a ScrollView with the .disabled(true) modifier, the gestures pass through to the list properly and scrolling is not blocked.

这篇关于SwiftUI 覆盖阻止列表滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！