Swiftui - 移动视图上的超薄材料故障答案

【问题标题】：Swift UI - UltraThinMaterial Glitch on Moving ViewsSwiftui - 移动视图上的超薄材料故障
【发布时间】：2022-12-24 15:31:02
【问题描述】：

当我移动具有超薄材料背景的视图时，它变成黑色。是错误还是我做错了什么？

是否有解决方法可以在移动视图上实现此视图？

我注意到只有在有角运动时才会发生。如果我删除旋转效果，问题就会消失。

可测试代码：

struct Test: View {
    
    @State var offset: CGFloat = 0
    @GestureState var isDragging: Bool = false
    
    var body: some View {
        GeometryReader { reader in
            ZStack {
                Image(systemName: "circle.fill")
                    .font(.largeTitle)
                    .frame(width: 300, height: 300)
                    .background(.red)
                    .overlay(alignment: .bottom) {
                        Rectangle()
                            .frame(height: 75)
                            .background(.ultraThinMaterial)
                    }
                    .clipShape(
                        RoundedRectangle(cornerRadius: 15, style: .continuous)
                    )
                    .compositingGroup()
                    .offset(x: offset)
                    .rotationEffect(.degrees(getRotation(angle: 8)))
                    .compositingGroup()
                    .gesture(
                        DragGesture()
                            .updating($isDragging) { _, state, _ in
                                state = true
                            }
                            .onChanged { value in
                                let translation = value.translation.width
                                offset = (isDragging ? translation : .zero)
                            }
                            .onEnded { value in
                                let width = getRect().width
                                let translation = value.translation.width

                                let checkingStatus = translation > 0 ? translation : -translation

                                withAnimation {
                                    if checkingStatus > (width / 2) {
                                        offset = (translation > 0 ? width : -width) * 2
                                    } else {
                                        offset = 0
                                    }
                                }
                            }
                    )
                    
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
    
    private func getRotation(angle: Double) -> Double {
        let rotation = (offset / getRect().width) * angle
        return rotation
    }
}

【问题讨论】：

标签： ios swift swiftui

【解决方案1】：

代码不可测试，所以很难确定，但是

尝试将带有修饰符的所有图像移动到单独的独立视图中

尝试合成它

 .clipShape(
     RoundedRectangle(cornerRadius: 15, style: .continuous)
 )
 .compositingGroup()       // << here !!
 .offset(y: -topOffset)

【讨论】：

【解决方案2】：

对我来说，只是添加 .compositingGroup() 修饰符没有任何改变，我仍然有一个小故障

就我而言，我还使用了模糊、阴影和其他修改器以及rotationEffect。当然，故障与旋转有关

我设法通过更改顺序或视图修饰符来解决问题。确保使用rotationEffect(_:axes:)前其他

【讨论】：