SwiftUI自定义ButtonStyle时Label图文前景色切换不同步如何解决

问题表现 #

• 预期逻辑：按压按钮时，内置文字与固定追加的SF Symbol加号图标前景色同步切换，按压状态显示蓝色，非按压状态显示红色
• 异常表现：按压过程中二者可同步变为蓝色，松开按压后文字立即恢复红色，图标存在数毫秒延迟动画才变回红色，颜色切换节奏不一致

问题复现代码 #

struct CustomStyle: ButtonStyle{
    func makeBody(configuration: Configuration) -> some View {
        return AnyView(Label {
            configuration.label
        } icon: {
            Image(systemName: "plus").resizable().frame(width: 30, height: 30)
        })
        .foregroundColor(
            configuration.isPressed ? Color.blue : Color.red
        )
        .padding()
        .frame(maxWidth: .infinity, minHeight: 20)
        .background(Color.yellow)
        .clipShape(Capsule())
    }
}
struct ContentView: View {
    var body: some View {
    
        VStack {
            Button(action: {}, label: { Text("amin") })
                .buttonStyle(CustomStyle())
        }
    
    }
}

根因分析 #

• 冗余AnyView包装：手动对视图做AnyView类型擦除会破坏SwiftUI对视图身份的追踪逻辑，打乱状态变更时的视图更新调度顺序
• SF Symbol默认隐式动画：系统会自动给ButtonStyle内部直接创建的SF Symbol图像附加按压联动的默认过渡动画，而通过configuration.label传入的外部文字内容不会被附加该动画，二者动画策略不统一导致更新错位

修复方案 #

• 移除makeBody中多余的AnyView包装，直接返回视图内容，保证SwiftUI可正常识别视图结构
• 给绑定configuration.isPressed的前景色变更逻辑显式指定空动画，强制所有关联视觉元素同步响应状态，屏蔽SF Symbol的默认附加动画

修复后完整代码 #

struct CustomStyle: ButtonStyle{
    func makeBody(configuration: Configuration) -> some View {
        Label {
            configuration.label
        } icon: {
            Image(systemName: "plus")
                .resizable()
                .frame(width: 30, height: 30)
        }
        .foregroundColor(
            configuration.isPressed ? Color.blue : Color.red
        )
        .animation(.none, value: configuration.isPressed)
        .padding()
        .frame(maxWidth: .infinity, minHeight: 20)
        .background(Color.yellow)
        .clipShape(Capsule())
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {}, label: { Text("amin") })
                .buttonStyle(CustomStyle())
        }
    }
}

修复后按压、松开按钮时文字和图标颜色完全同步切换，无延迟错位问题。

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