修复 SwiftUI 表单中奇怪的 DatePicker 动画行为 [英] Fix odd DatePicker animation behaviour in SwiftUI form

问题描述

我在 SwiftUI 表单中使用 DatePickers 获得了一些奇怪的动画行为.一张图片值一千字，所以我确信一个视频值一百万字:

VStack {DatePicker(Test", selection:$date).id(2)}.动画(无)

2) 复杂的解决方案 - 使用 a) 视图首选项阅读器抓取 DatePicker 更改框架

struct TestDatePickersInForm:查看{@State var date = Date()@State var isDateShown = false@State 私有变量高度 = CGFloat.zerovar主体:一些视图{形式 {部分(标题:文本(标题")){//复杂解的演示虚拟堆栈{DatePicker("Test", selection:$date).id(1).background(GeometryReader {Color.clear.preference(key: ViewHeightKey.self,值:$0.frame(in: .local).size.height) })}.onPreferenceChange(ViewHeightKey.self) { self.height = $0 }.modifier(AnimatingCellHeight(height: height)).animation(.default)//简单解决方案的演示虚拟堆栈{DatePicker(Test", selection:$date).id(2)}.动画(无)文本(选择一个日期").onTapGesture {带动画{self.isDateShown.toggle()}}如果(是日期显示){DatePicker("", selection: $date).datePickerStyle(WheelDatePickerStyle()).labelsHidden().id(3)}}部分(标题:文本(你好")){文本(测试")}}}}

I'm getting some odd animation behaviour with DatePickers in a SwiftUI form. A picture is worth a thousand words, so I'm sure a video is worth a million words: https://imgur.com/a/UHXqXOh

I'm trying to get the date picker to expand and then collapse within the form, exactly like the behaviour when creating a new event in Calendar.app

What is happening for me is:

1. Any expanding item in a Section (other than the last one) will open normally, but when it closes the expanded part slides down and fades, instead of sliding up and fading.
2. The last item in the section slides correctly but doesn't fade at all. It simply appears and then disappears at the start/end of the transition

These behaviours only happen if there is a non-DatePicker element (e.g. Text, Slider) somewhere in the form (doesn't have to be in that particular section)

Here's my ContentView:

struct ContentView: View {
    @State var date = Date()
    @State var isDateShown = false
    var body: some View {
            Form {
                Section(header: Text("Title")) {
                    DatePicker("Test", selection:$date)
                    DatePicker("Test", selection:$date)
                    Text("Pick a date").onTapGesture {
                        withAnimation {
                            self.isDateShown.toggle()
                        }
                       
                    }
                    if(isDateShown) {
                        DatePicker("", selection: $date).datePickerStyle(WheelDatePickerStyle()).labelsHidden()
                    }
                    
                }
                Section(header: Text("hello")) {
                    Text("test")
                }
        }
        
    }
}

Happy to provide anything else required

解决方案

Here are two possible workarounds for iOS <14: 1) simple one is to disable animation at all, and 2) complex one is to mitigate incorrect animation by injecting custom animatable modifier

Tested both with Xcode 11.4 / iOS 13.4

1) simple solution - wrap DatePicker into container and set animation to nil

VStack {
    DatePicker("Test", selection:$date).id(2)
}.animation(nil)

2) complex solution - grab DatePicker changing frame using a) view preference reader ViewHeightKey and b) animate this frame explicitly using AnimatingCellHeight from my other solutions.

struct TestDatePickersInForm: View {
    @State var date = Date()
    @State var isDateShown = false
    @State private var height = CGFloat.zero
    var body: some View {
            Form {
                Section(header: Text("Title")) {
                    // demo of complex solution
                    VStack {
                        DatePicker("Test", selection:$date).id(1)
                            .background(GeometryReader {
                                Color.clear.preference(key: ViewHeightKey.self,
                                    value: $0.frame(in: .local).size.height) })
                    }
                    .onPreferenceChange(ViewHeightKey.self) { self.height = $0 }
                    .modifier(AnimatingCellHeight(height: height))
                    .animation(.default)

                    // demo of simple solution
                    VStack {
                        DatePicker("Test", selection:$date).id(2)
                    }.animation(nil)

                    Text("Pick a date").onTapGesture {
                        withAnimation {
                            self.isDateShown.toggle()
                        }

                    }
                    if(isDateShown) {
                        DatePicker("", selection: $date).datePickerStyle(WheelDatePickerStyle()).labelsHidden().id(3)
                    }

                }
                Section(header: Text("hello")) {
                    Text("test")
                }
        }

    }
}

这篇关于修复 SwiftUI 表单中奇怪的 DatePicker 动画行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！