Swift UI - 移动视图上的 UltraThinMaterial 故障

Question

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

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

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

可测试代码：

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

Answer 1

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

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

尝试合成它

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

Swift UI - 移动视图上的 UltraThinMaterial 故障

Swift UI - UltraThinMaterial Glitch on Moving Views

ios

swift

swiftui