ios Swift UI -移动视图时出现UltraThinMaterial毛刺

ih99xse1  于 2022-12-24  发布在  iOS
关注(0)|答案(2)|浏览(156)

当我移动一个超薄材质背景的视图时,它变黑了。是bug还是我做错了什么?
是否有变通方案在移动视图上实现此视图?
我注意到只有当有角运动时才会发生。如果我删除旋转效果,问题就会消失。
测试代码:

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

smdnsysy

smdnsysy1#

代码是不可测试的,所以很难说清楚,但是
1.尝试将带有修改器所有图像移动到单独的独立视图中
1.试试复合吧

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

bsxbgnwa2#

对我来说,仅仅添加.compositingGroup()修改器并没有改变什么,我仍然有一个小故障
在我的例子中,我也使用模糊,阴影和其他修改器以及rotationEffect。当然,这个小故障与旋转有关
我设法通过更改顺序或视图修饰符解决了这个问题。请确保在使用其他项之前使用rotationEffect(_:axes:)

相关问题