SwiftUI中Button样式设置和自定义样式（buttonStyle）

SwiftUI使我们可以很容易地定制Button外观样式,在本文中，我们了解一下系统给我们提供的内置的外观样式以及何如自定义外观样式。

系统外观样式

系统内置了以下几种样式：

1. DefaultButtonStyle：这是默认的按钮样式，通常不需要显式设置.
2. PlainButtonStyle：这种样式移除了按钮的所有装饰，使按钮看起来像普通文本。
3. BorderlessButtonStyle：这种样式创建一个没有边框的按钮。
4. BorderedButtonStyle： 这种样式创建一个有边框的淡灰色背景的按钮，且自带圆角。
5. BorderedProminentButtonStyle：这种样式创建一个有边框自带圆角的按钮，且背景色为accentColor。

通过下图效果可以看出：DefaultButtonStyle和BorderlessButtonStyle的样式相同。

将项目中的Asset文件中的accentColor改为红色，看看每个Button的变化，因为DefaultButtonStyle和BorderlessButtonStyle的样式相同，这里人为的将DefaultButtonStyle样式的Button文字改为green。

通过效果图可以看出：

• PlainButtonStyle样式文字没有改变。
• BorderlessButtonStyle和BorderedButtonStyle样式文字变为了accentColor。
• BorderedProminentButtonStyle样式背景色变为了accentColor，文字为白色。

在添加.buttonStyle修饰符的时候，我们可以简化设置，如下：

自定义外观样式

我的时候系统内置的样式无法满足我们App的需求，我们就需要自己去添加样式，比如下面这个：

如果设计的是单个按钮，那么这种方法完全没问题，但是，如果需要开发具有相同样式的多个按钮，则需要使用ButtonStyle协议。它将有助于在整个应用程序的不同按钮上共享和应用相同的样式。

下面创建一个名为PrimaryButtonStyle的自定义按钮样式。这是整个应用程序中主按钮使用的样式。

struct PrimaryButtonStyle: ButtonStyle {
  func makeBody(configuration: Configuration) -> some View {
      configuration.label
      .font(.callout)
      .foregroundColor(.white)
      .frame(maxWidth: .infinity, maxHeight: 48)
      .background(.blue)
      .cornerRadius(8)
      .padding()
  }
}

要创建自定义按钮样式，我们需要遵守ButtonStyle协议并实现makeBody(configuration:)方法。此方法返回按钮的主体，它通常是一个视图，可以对其进行定位和样式设置以匹配所需的外观。

使用该样式如下：

Button("Tap me") {}
	.buttonStyle(PrimaryButtonStyle())

这样我们就可以在用到这种样式的按钮上添加一个.buttonStyle修饰符即可，不需要设置那么多的修饰符。

ButtonStyle中的Configuration有几个属性，包括isPressed布尔值，它指示按钮当前是否被按下。当用户点击按钮时，我们可以用它来改变按钮样式。如下:

struct PrimaryButtonStyle: ButtonStyle {
  func makeBody(configuration: Configuration) -> some View {
      configuration.label
        .font(.callout)
        .foregroundColor(.white)
        .frame(maxWidth: .infinity, maxHeight: 48)
        .background(configuration.isPressed ? .blue.opacity(0.75) : .blue)
        .cornerRadius(8)
        .padding()
  }
}

关于自定义样式的定义，我们也可以仿写系统的代码，给ButtonStyle加个扩展：

extension ButtonStyle where Self == PrimaryButtonStyle {
  static var primary: PrimaryButtonStyle {
    PrimaryButtonStyle()
  }
}

这样在给Button添加我们自定义的样式的时候，也可以简化设置了。

Button("Tap me") {}
  .buttonStyle(.primary)

使用ButtonStyle，我们可以定义按钮的外观、布局和交互，并确保整个应用程序的一致性。

写在最后

本文主要介绍了SwiftUI中Button的基础样式，以及如何自定义Button样式，Button在整个App中使用非常广泛，设置一种或者几种统一的ButtonStyle是非常有必要的。

最后，希望能够帮助到有需要的朋友，如果您觉得有帮助，还望点个赞，添加个关注，笔者也会不断地努力，写出更多更好用的文章。