SwiftU 如何使用 ButtonStyle 自定义按钮？

15 min read

SwiftUI 中的 ButtonStyle 协议可用于创建自定义按钮样式。以下是使用 ButtonStyle 自定义按钮的步骤：

  1. 创建一个遵循 ButtonStyle 协议的结构体或类。

  2. 实现 makeBody(configuration: Self.Configuration) 方法。

  3. 在 makeBody(configuration:) 方法中，返回一个 Button 的 body。

  4. 在 makeBody(configuration:) 方法中，可以通过 configuration 定制 Button 的外观和行为，例如设置按钮的文本字体、背景色等。

  5. 将自定义的 ButtonStyle 应用于 Button 上，例如：

Button("点击我") {
    // 按钮点击后的操作
}
.buttonStyle(MyButtonStyle())

完整实现代码示例：

struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .foregroundColor(.white)
            .font(.headline)
            .padding()
            .background(configuration.isPressed ? Color.blue.opacity(0.7) : Color.blue)
            .cornerRadius(10)
    }
}

struct ContentView: View {
    var body: some View {
        Button("点击我") {
            // 按钮点击后的操作
        }
        .buttonStyle(MyButtonStyle())
    }
}

在上面的示例中，MyButtonStyle 自定义了一个带圆角的蓝色按钮，点击按钮时会有半透明的深色蒙版效果。

通过使用 ButtonStyle 协议，开发者可以更加灵活地控制和定制按钮的外观和行为，提高界面的交互性和体验性。