Ios SwiftUI ScrollView混合模式问题

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

我试图将混合模式直接应用于scrollview，但由于子视图中还有其他未混合的项，因此会弄糟。 下面是一个例子来说明这个问题。这样，可以看到渐变混合在堆栈中工作，但在scrollview中不工作

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
                 */
            }
        }
    }
}

我还尝试将黑色到红色的矩形作为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中

你知道怎么解决这个问题吗

我所能想到的唯一一件事，似乎是非常粗糙的，就是基本上创建两个scrollview z-stacked，其中blend只应用于需要它的scrollview，然后将未混合的项放在最上面的scrollview中

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
                 */
            }
        }
    }
}

---

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

我遇到了一个类似的问题，并且通过实验，当设置了混合模式集的SwiftUI

视图直接位于
UIHostingView
（例如
滚动视图
）

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

滚动视图{
ZStack{
矩形（）
.fill（径向渐变（渐变：渐变（颜色：[颜色.黑色，颜色.红色]），中心：。顶行，星形：200，尾端：800））
VStack（间距：50）{
ForEach（（1…5）.reversed（），id:\.self）{
项目（0美元）
}
}
}
}

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

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

我的问题出现在
列表
行中（由
UITableView
支持），并在
列表中的项目上设置明确的背景。希望这将为您/其他人指明正确的方向。
我遇到了一个类似的问题，通过实验，似乎当带有混合模式集的SwiftUI
视图直接位于
中时，混合模式会受到影响UIHostingView
（例如
滚动视图
）

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

滚动视图{
ZStack{
矩形（）
.fill（径向渐变（渐变：渐变（颜色：[颜色.黑色，颜色.红色]），中心：。顶行，星形：200，尾端：800））
VStack（间距：50）{
ForEach（（1…5）.reversed（），id:\.self）{
项目（0美元）
}
}
}
}

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

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

我的问题是在
列表
行中（由
UITableView
支持），在
列表
中设置项目的明确背景有助于解决问题。希望这将为您/其他人指明正确的方向