SwiftUI ScrollView BlendMode 问题答案

【问题标题】：SwiftUI ScrollView BlendMode IssuesSwiftUI ScrollView BlendMode 问题
【发布时间】：2020-10-27 02:20:50
【问题描述】：

我遇到了 SwiftUI 和 ScrollView 的问题。当我在滚动视图中有一个具有混合模式属性的子视图时，混合不会影响滚动视图后面的内容。但是如果我把同一个项目放在一个堆栈中，它确实会影响背景。

我尝试将混合模式直接应用到滚动视图，但由于子视图中还有其他项目没有混合，所以它搞砸了。这是一个示例来说明这个问题。这样，您可以在 Stack 中看到渐变混合效果，但在滚动视图中却看不到。

let mode: BlendMode = .overlay

func item(_ num: Int) -> some View {
    return AnyView(
        ZStack {
            Rectangle()
                .fill( LinearGradient(gradient: Gradient(colors: [Color.blue, Color.black]), startPoint: .top, endPoint: .bottom))
                .frame(width: 100, height: 100)
                .blendMode(mode)
        
            Text("Number = \(num)")
                .font(.headline)
                .foregroundColor(Color.white)
        }
    )
}

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(RadialGradient(gradient: Gradient(colors: [Color.black, Color.red]), center: .topLeading, startRadius: 200, endRadius: 800))
            
            HStack (spacing: 50) {
                VStack (spacing: 50) {
                    ForEach((1...5).reversed(), id: \.self) {
                        item($0)
                    }
                }
                
                ScrollView {
                    VStack (spacing: 50) {
                        ForEach((1...5).reversed(), id: \.self) {
                            item($0)
                        }
                    }
                }
                //.blendMode(mode)

                /*
                 blendMode for item() in ScrollView does not work.
                                                
                 Uncomment blendMode modifier above to get gradient blend, but text is not correct
                 */
            }
        }
    }
}

我也尝试将黑色到红色的 Rectangle 应用为 Scrollview 的背景，但这也无法解决问题。

ScrollView {
    VStack (spacing: 50) {
        ForEach((1...5).reversed(), id: \.self) {
            item($0)
            
        }
    }
    
}
.background(
    Rectangle()
        .fill(RadialGradient(gradient: Gradient(colors: [Color.black, Color.red]), center: .topLeading, startRadius: 200, endRadius: 800))
)

在下面的图片中，我想要的外观在左侧 VStack 中。

No blend mode modifier on ScrollView

Blend mode modifier applied to Scrollview

知道如何解决这个问题吗？

我能想到的唯一一件事，这似乎很 hacky，基本上是创建两个 z-stacked 滚动视图，并仅将混合应用于需要它的滚动视图，然后将未混合的项目放在最顶部的滚动视图中。

但是，我认为这不可行，因为我看不到在两个滚动视图之间同步滚动。

【问题讨论】：

标签： ios swiftui

【解决方案1】：

我遇到了类似的问题，并且通过实验，当带有混合模式集的 SwiftUI View 直接位于 UIHostingView（例如 ScrollView）内时，混合模式似乎受到了影响。

您可以通过将另一个 SwiftUI 视图置于滚动视图中具有混合模式的视图下方来获得正确的混合，例如

ScrollView {
    ZStack {
        Rectangle()
          .fill(RadialGradient(gradient: Gradient(colors: [Color.black, Color.red]), center: .topLeading, startRadius: 200, endRadius: 800))
    
        VStack (spacing: 50) {
            ForEach((1...5).reversed(), id: \.self) {
                item($0)
            }
        }
    }
}

这并不能完全解决您的示例中的问题，因为两个背景没有完全对齐，但在滚动视图占据屏幕的情况下它可能会有所帮助。

似乎向滚动视图添加.background 会将其添加到ScrollView 下方，而不是ScrollView 中层次结构的底部，这就是为什么这似乎无法解决它。

我的问题出在List 行（由UITableView 支持），并在List 内的项目上设置明确的背景有助于那里。希望这将为您/其他人指明正确的方向。

【讨论】：