SwiftUI中如何避免HStack尺寸变化时的动画效果？

我正在解决HStack尺寸变化时的动画抑制问题，以下是简化后的独立示例——一个用两个Menu实现的日期选择器，点击月份或年份菜单可选择新值。

之前我用.animation(nil)来阻止月份切换时HStack尺寸变化产生的动画，但这个方法在iOS 15中已被弃用：

如果移除.animation(nil)，就会出现不想要的动画效果。

我已经尝试过以下两种方法，但都无法阻止动画：

• 为animation添加参数：.animation(nil, value: pickedMonth)
• 将pickedMonth的赋值代码包裹在withAnimation(nil) { }中

请问在iOS 15及更高版本中该如何实现？

import SwiftUI

struct ContentView: View {
    let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
    let years = 1990..<2025
    @State private var pickedMonth = "May"
    @State private var pickedYear = 2022
    
    var body: some View {
        HStack(spacing: 5) {
            Menu {
                ForEach(months, id: \.self) { month in
                    Button(month) {
                        // withAnimation(nil) {
                            pickedMonth = month
                        // }
                    }
                }
            } label: {
                Text("\(pickedMonth),")
                    .font(.system(size: 24, weight: .semibold, design: .rounded))
                    .foregroundColor(.blue)
                    .fixedSize()
            }
            
            Menu {
                ForEach(years, id: \.self) { year in
                    Button(String(year)) {
                        pickedYear = year
                    }
                }
            } label: {
                Text(String(pickedYear))
                    .font(.system(size: 24, weight: .semibold, design: .rounded))
                    .foregroundColor(.blue)
                    .fixedSize()
            }
        }
        .fixedSize()
        .animation(nil)
        //.animation(nil, value: pickedMonth)
    }
}

解决方案 #

在iOS 15及更高版本中，推荐通过事务控制或针对性的动画修饰符来禁用尺寸变化的动画，以下是几种有效方法：

方法一：使用.transaction修饰符 #

直接给HStack添加.transaction修饰符，在事务中将动画设置为nil，从根源阻止视图尺寸变化的动画：

HStack(spacing: 5) {
    // 原有Menu内容
}
.fixedSize()
.transaction { tx in
    tx.animation = nil
}

方法二：在状态更新时使用withTransaction #

修改月份选择按钮的点击逻辑，用withTransaction包裹状态赋值操作，明确指定该更新不使用动画：

Button(month) {
    withTransaction(Transaction(animation: nil)) {
        pickedMonth = month
    }
}

方法三：使用.animation(_:value:)指定多触发值 #

如果需要针对月份和年份变化都禁用动画，可将两个状态值作为触发参数传入.animation修饰符：

HStack(spacing: 5) {
    // 原有Menu内容
}
.fixedSize()
.animation(nil, value: [pickedMonth, pickedYear])

以上三种方法均能有效抑制HStack尺寸变化时的动画效果，其中方法一代码简洁且作用明确，是优先推荐的方案。

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