SwiftUI:将动画添加到Picker中而不将其添加到值中

时间:2019-08-09 17:54:50

标签: swiftui picker

我正在尝试基于切换动画化选择器的隐藏/显示。如果是真或假,我希望选择器使用easeInOut

我尝试将.animation(Animation.easeInOut(duration: 0.5))添加到选择器本身或选择器所在的HStack中,但是都将动画添加到选择器内部的值中,并且在滚动浏览值时使应用程序崩溃。

        HStack {
            if showPicker {
                Picker(selection: $selected.value, label: Text(selected.type)) {
                    ForEach(digits, id: \.self) { d in
                        Text("\(d)")
                    }
                }
                .frame(width: 40)
            }
        }
        .animation(Animation.easeInOut(duration: 2))

            if showPicker {
                Picker(selection: $selected.value, label: Text(selected.type)) {
                    ForEach(digits, id: \.self) { d in
                        Text("\(d)")
                    }
                }
                .frame(width: 40)
                .animation(Animation.easeInOut(duration: 0.5))
            }

这两个选项都可以为隐藏/显示选择器设置动画,但是它还可以动画显示选择器中的值,从而使其崩溃。

任何帮助将不胜感激。

谢谢

1 个答案:

答案 0 :(得分:0)

关于第一种方法,将动画放在HStack上。绝对不要那样做。根据声明文件中的注释:

  

在叶子视图而不是容器视图上使用此修饰符。的   动画适用于该视图中的所有子视图;呼唤   容器视图上的animation(_:)可能导致范围不受限制。

我尝试了第二种方法(填补您的帖子中遗漏的部分),并且不会崩溃。也许您可以使用完全可重复的示例来更新您的问题。

已将动画更改为显式,因此其他参数不受影响:

struct PickerStackOverflow: View {
    @State private var showPicker = true
    @State private var value: Int = 1

    let digits: [Int] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

    var body: some View {
        VStack {
            Text("Selected \(value)")

            HStack {
                if showPicker {
                    Picker(selection: $value, label: Text("Label")) {
                        ForEach(digits, id: \.self) { d in
                            Text("\(d)")
                        }
                    }
                    .frame(width: 40)
                }
            }


            Button("Tap Me") {
                withAnimation(Animation.easeInOut(duration: 2)) {
                    self.showPicker.toggle()
                }

            }
        }

    }
}