ButtonStyle 是 SwiftUI 提供的一种自定义按钮外观和交互方式的机制，允许我们创建可复用的按钮样式，并在多个 Button 组件上应用。
🔹 基本使用 #
我们可以创建一个自定义的 ButtonStyle，然后在多个 Button 组件上使用它。
📝 自定义 ButtonStyle
#
struct CustomButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.padding()
.background(configuration.isPressed ? Color.gray : Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
.scaleEffect(configuration.isPressed ? 0.95 : 1.0) // 点击时缩小
.animation(.easeInOut(duration: 0.2), value: configuration.isPressed)
}
}
📌 关键点：
configuration.label代表Button的内容（Text、Image等）。configuration.isPressed表示按钮是否被按下。.background()和.scaleEffect()让按钮在点击时有视觉反馈。animation(.easeInOut(duration: 0.2))让交互更平滑。
🎯 使用 ButtonStyle
#
Button("Tap Me") {
print("Button tapped!")
}
.buttonStyle(CustomButtonStyle()) // 应用样式
🔹 预设 ButtonStyle
#
SwiftUI 也提供了一些内置样式，可以直接使用：
Button("Default") { }
.buttonStyle(DefaultButtonStyle()) // 默认样式
Button("Plain") { }
.buttonStyle(PlainButtonStyle()) // 去掉所有默认样式
Button("Borderless") { }
.buttonStyle(BorderlessButtonStyle()) // 类似 Plain，但不会影响菜单按钮
🔹 适用于特定类型的按钮 #
如果你的 ButtonStyle 只适用于某种特定的 Button，可以使用条件限制：
struct RedButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.padding()
.background(Color.red)
.foregroundColor(.white)
.cornerRadius(8)
}
}
// 只让 `Destructive` 类型的按钮使用这个样式
extension ButtonStyle where Self == RedButtonStyle {
static var destructive: RedButtonStyle { RedButtonStyle() }
}
Button("Delete") { }
.buttonStyle(.destructive) // 使用自定义扩展
🔹 ButtonStyle vs .buttonStyle() vs .background()
#
| 方式 | 适用场景 | 可复用性 |
|---|---|---|
.background() + .padding() | 适用于单个按钮 | 需要手动复制样式 |
.buttonStyle(CustomButtonStyle()) | 适用于多个按钮 | 高，可复用 |
.buttonStyle(DefaultButtonStyle()) | 适用于默认按钮 | 低 |
.buttonStyle(PlainButtonStyle()) | 适用于去掉默认交互 | 低 |
🚀 如果要自定义多个按钮，使用 ButtonStyle 更好！