HStack中Text添加.disabled修饰符后动画异常问题排查

问题情况 #

HStack内的Image动画执行正常，但Text会直接在原位置和新位置间跳变，经排查是.disabled修饰符导致的布局异常。为清晰展示问题，特意放大了VStack的spacing。

在iOS 16.4上运行时，时序问题会得到修复，但动画过程中会出现字符重排的问题（无论用Label还是Image+Text组合的HStack都会出现）。

最小复现代码 #

struct ContentView: View {
    @State var showTitle: Bool = false
    
    var body: some View {
        VStack(spacing: 50) {
            if showTitle {
                Text("Title")
            }
            Button {} label: {
                HStack {
                    Image(systemName: "cloud")
                    Text("Cloud")
                }
                .disabled(showTitle)
                .animation(.default, value: showTitle)
            }
            Button("Toggle"){
                showTitle.toggle()
            }
        }
    }
}

已尝试方案的局限 #

• 使用.drawingGroup能解决动画跳变问题，但会破坏.clipShape等需要保留的样式效果，不符合需求。
• 移除.disabled修饰符后动画表现正常，但业务上需要保留按钮的禁用状态。
• 需支持iOS 16+版本

可行解决方案 #

方案1：调整.disabled的应用层级（推荐） #

把.disabled从HStack移到Button本身，这样不会干扰HStack内部视图的布局动画逻辑：

struct ContentView: View {
    @State var showTitle: Bool = false
    
    var body: some View {
        VStack(spacing: 50) {
            if showTitle {
                Text("Title")
            }
            Button {} label: {
                HStack {
                    Image(systemName: "cloud")
                    Text("Cloud")
                }
            }
            .disabled(showTitle) // 移至Button层级
            .animation(.default, value: showTitle)
            
            Button("Toggle"){
                showTitle.toggle()
            }
        }
    }
}

方案2：给Text添加固定尺寸约束 #

如果必须在HStack上应用.disabled，可以给Text设置固定尺寸，避免动画时布局重计算导致跳变：

HStack {
    Image(systemName: "cloud")
    Text("Cloud")
        .fixedSize() // 固定文本尺寸，防止布局动态变化
}
.disabled(showTitle)
.animation(.default, value: showTitle)

也可以用.frame指定具体宽高，适配不同的布局需求：

Text("Cloud")
    .frame(width: 60, alignment: .leading)

方案3：用withAnimation包裹状态切换 #

把状态切换逻辑放在withAnimation中，强制同步所有相关视图的动画节奏：

Button("Toggle"){
    withAnimation(.default) {
        showTitle.toggle()
    }
}

这个方案可以配合HStack上的.disabled使用，但优先推荐方案1，更符合SwiftUI的布局设计逻辑。

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