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

Posted 2023-02-24

【中文标题】SwiftUI：将动画添加到 Picker 而不将其添加到值中

【英文标题】：SwiftUI: Add animation to Picker without adding it to the values

【发布时间】：2019-08-09 17:54:50

【问题描述】：

我正在尝试根据切换为选择器的隐藏/显示设置动画。如果是真的或假的，我希望选择器到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】：

关于您的第一种方法，将动画放在 HStack 上。永远不要那样做。根据声明文件中的cmets：

在叶视图而不是容器视图上使用此修饰符。这 动画适用于该视图内的所有子视图；打电话 容器视图上的animation(_:) 可能导致无限范围。

我尝试了您的第二种方法（填补您帖子中缺少的部分），它不会崩溃。也许你可以用一个完全可重现的例子来更新你的问题。

将动画改为显式，所以其他参数不受影响：

struct Picker***: 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()
                

            
        

    

【讨论】：

我尝试了您的代码，但仍然看到选择器中的值存在问题，在本例中为 1-14，也获得了动画。如果您注释掉.animation(Animation.easeInOut(duration: 2)) 并再次运行它，您会看到它滚动得更顺畅。如果你滚动得非常快，你仍然会看到所有的数字都过去了。使用动画修改器，如果您快速滚动，值似乎会消失，并且体验有点笨拙。

另外，感谢您提供有关在容器上使用动画的信息。

我看不到你的评论。你是 Beta 5 吗？模拟器？设备？实时预览？

我更新了代码，使其使用显式（而不是隐式）动画。由于我无法重现该问题，我不知道这是否会解决它，但应该会。

是的，明确修复了它。谢谢！仅供任何可能想知道的人参考，这是使用手表模拟器的 beta 5。