SwiftUI Wheel Picker 导致 Overlay 过渡动画卡顿?

SwiftUI Wheel Picker causing Overlay transition animation stutter?

提问人:Monica Peng 提问时间:7/25/2023 更新时间:7/25/2023 访问量:41

问:

我有按钮切换isOverlayShowing,它使用底部的边缘过渡调出覆盖层。从下面的视频中可以看出,两者都使用了相同的 OverlayModal 和相同的动画持续时间,但每次我调用它时,轮子选择器的那个似乎都会卡顿一下。我尝试使用不同的持续时间和动画方法,但似乎没有解决问题。

https://youtube.com/shorts/LGEb8WTcVO8

这已经困扰了我好几天了。任何帮助将不胜感激!

这是 OverlayModal 的 Quick Add 和 Repeat Entry 共享。但是Quick Add上的动画非常流畅。

struct OverlayModal<Content: View>: View {
   
    @ObservedObject var keyboard: KeyboardObserver = KeyboardObserver()
    
    let content: () -> Content
    @Binding var isShowing: Bool
    
    
    init(isShowing: Binding<Bool>, @ViewBuilder content: @escaping() -> Content) {
        self.content = content
        self._isShowing = isShowing
    }
   
    var body: some View {
        ZStack (alignment: .bottom) {
            if isShowing {
                Color.black
                    .opacity(0.3)
                    .ignoresSafeArea()
                    .onTapGesture {
                            keyboard.resignFirstResponder()
                        isShowing.toggle()
                    }
                content()
                    .transition(.move(edge: .bottom))
                    .background(Color.clear)
            }
        }
        .onAppear { self.keyboard.addObserver() }
        .frame(maxWidth: .infinity,
               maxHeight: .infinity,
               alignment: .bottom)
        .ignoresSafeArea()
        .animation(.easeOut(duration: 0.275), value: isShowing)
    }
}
    var body: some View {
        OverlayModal(isShowing: $isShowing) {
            ZStack {
                RoundedTopRectangle(radius: customConstants.roundedRectRadius)
                    .foregroundColor(.overlayKeyboard)
                
                VStack {
                    HStack {
                        Image(systemName: "xmark")
                        Spacer()
                        Text("Copy From")
                            .font(.subheadline)
                            .fontWeight(.semibold)
                        Spacer()
                        Image(systemName: "checkmark")
                    }
                    .padding(.horizontal)
                    .padding(.top)
                    Divider()
                    Spacer()
                    overlayCopyFromPicker()
                    Spacer()
                    Spacer()
                }
            }
            .frame(height: 250 + customConstants.verticalPadding)
            .onAppear { selectedDate = thisViewDate }
        }
    }
    private func overlayCopyFromPicker() -> some View {
        
        Picker("", selection: $selectedDate) {
            ForEach(pickerDateArray, id: \.self) {date in
                Text(dateHelper.copyFromPickerDate(date: date)).tag(date)
            }
        }
        .padding(.horizontal)
        .pickerStyle(.wheel)
        .frame(height: 170)
        
    }
swiftui-animation swiftui-picker

评论


答: 暂无答案