SwiftUI中Picker选择变化时GroupBox无动画效果问题求助

直接给GroupBox绑定periodIndex添加动画无效，是因为Picker内容变化导致的GroupBox尺寸变化属于间接布局变更，SwiftUI无法自动将这种变更关联到你设置的动画监听。可以用以下两种方法解决：

方案一：自定义绑定触发动画 #

通过自定义Binding，在选中值变更时手动触发动画上下文，确保所有关联的布局变化都参与动画：

@State private var periodIndex = 0
// 自定义带动画的绑定
private var animatedPeriodBinding: Binding<Int> {
    Binding(
        get: { periodIndex },
        set: { newValue in
            withAnimation(.spring()) {
                periodIndex = newValue
            }
        }
    )
}

// 使用自定义绑定的Picker和GroupBox
GroupBox {
    Picker("Period", selection: animatedPeriodBinding) {
        ForEach(0..<periods.count, id: \.self) { index in
            Text(periods[index]).tag(index)
        }
    }
    .tint(.white)
}

方案二：给Picker添加动画修饰符 #

同时给Picker和GroupBox绑定相同的动画监听，让Picker的内容变化动画传递到GroupBox的尺寸变化：

GroupBox {
    Picker("Period", selection: $periodIndex) {
        ForEach(0..<periods.count, id: \.self) { index in
            Text(periods[index]).tag(index)
        }
    }
    .tint(.white)
    .animation(.spring, value: periodIndex) // 给Picker添加动画
}
.animation(.spring, value: periodIndex) // 保留GroupBox的动画

这两种方法都能让GroupBox的宽度随Picker选中值变化时产生弹簧动画效果。

内容的提问来源于stack exchange，提问作者Dany Jamous