如何通过视图修饰符为SwiftUI原生Button添加额外操作

我们可以通过自定义ButtonStyle结合视图扩展来实现需求，既保留原生Button的所有特性，又能通过修饰符形式添加额外操作。

实现步骤 #

1. 自定义ButtonStyle
   创建遵循ButtonStyle协议的样式，拦截点击事件并合并原操作与额外操作：

   struct AdditionalActionButtonStyle: ButtonStyle {
       let additionalAction: () -> Void
       
       func makeBody(configuration: Configuration) -> some View {
           configuration.label
               .buttonStyle(.automatic) // 保留原生Button的视觉样式
               .onTapGesture {
                   configuration.action() // 执行原Button的点击逻辑
                   additionalAction() // 执行额外操作
               }
       }
   }
   

2. 扩展View添加便捷调用方法
   给View扩展一个方法，让调用更符合需求中的语法：

   extension View {
       func printWhenTapped(_ message: String) -> some View {
           self.buttonStyle(AdditionalActionButtonStyle(
               additionalAction: {
                   print(message)
               }
           ))
       }
       
       // 可选：通用版本，支持任意额外操作
       func onTapAddAction(_ action: @escaping () -> Void) -> some View {
           self.buttonStyle(AdditionalActionButtonStyle(additionalAction: action))
       }
   }
   

使用示例 #

按照需求中的方式调用：

Button("Tap me") {
    print("tapped")
}
.printWhenTapped("tapped again")

点击按钮后会依次输出：

tapped
tapped again

如果需要添加更复杂的额外操作，可使用通用版本：

Button("Tap me") {
    print("tapped")
}
.onTapAddAction {
    print("tapped again")
    // 这里可以加入弹窗、状态更新等任意逻辑
}

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