【Swift UI】ButtonStyleでカスタムデザインボタンの実装方法！

Button {
    
} label: {
    Text("borderless")
}.buttonStyle(.borderless)
// .buttonStyle(BorderlessButtonStyle()) でも可

Button {
    
} label: {
    Text("automatic")
}.buttonStyle(.automatic)

Button {
    
} label: {
    Text("plain")
}.buttonStyle(.plain)

Button {
    
} label: {
    Text("bordered")
}.buttonStyle(.bordered)

Button {
    
} label: {
    Text("borderedProminent")
}.buttonStyle(.borderedProminent)

Button {
    
} label: {
    Text("borderless")
}.buttonStyle(.borderless)

/// テーマカラーのボタンスタイル
struct ThemaButtonStyle: ButtonStyle {
    // ボタンの活性/非活性状態を取得
    @Environment(\.isEnabled) var isEnabled: Bool
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.vertical)
            .fontWeight(.bold)
            .foregroundStyle(.white)
            .background(isEnabled ? .red : .gray)
            .clipShape(RoundedRectangle(cornerRadius: 8))
            .opacity(configuration.isPressed ? 0.5 : 1) // configuration.isPressedでボタンを押している状態を取得
            .animation(.easeOut(duration: 0.2), value: configuration.isPressed)
            .shadow(color: .gray,radius: 3, x: 2, y: 2)
    }
}

@Environment(\.isEnabled) var isEnabled: Bool

// configuration.isPressedでボタンを押している状態を取得してUI変更
.opacity(configuration.isPressed ? 0.5 : 1)

Button {
} label: {
    Text("カスタム")
}.buttonStyle(ThemaButtonStyle())
  .disabled(flag)

extension ButtonStyle where Self == ThemaButtonStyle {
    static var thema: ThemaButtonStyle {
        return ThemaButtonStyle()
    }
}