SwiftUI：枠線ありボタンスタイルを作成する、いろいろカスタム可

2025年3月7日

ボタンスタイル定義

struct CustomLineBorderedButtonStyle: ButtonStyle {
    @Environment(\.isEnabled) var isEnabled
    var enableColor: Color = .blue
    var disableColor: Color = .gray
    var cornerRadius: CGFloat = 8.0
    var lineWidth: CGFloat = 0.5
    var labelPadding: EdgeInsets = EdgeInsets(top: 4.0, leading: 4.0, bottom: 4.0, trailing: 4.0)
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(self.labelPadding)
            .foregroundColor(self.isEnabled ? self.enableColor : self.disableColor)
            .clipShape(RoundedRectangle(cornerRadius: self.cornerRadius))
            .overlay {
                RoundedRectangle(cornerRadius: self.cornerRadius)
                    .stroke(self.isEnabled ? self.enableColor : self.disableColor,
                            lineWidth: self.lineWidth)
            }
    }
}

Example

Button("I'll set it later.") {
    self.dismiss()
}
.buttonStyle(CustomLineBorderedButtonStyle(labelPadding: EdgeInsets(top: 8.0, leading: 16.0, bottom: 8.0, trailing: 16.0)))

Button("Set") {
}
.buttonStyle(CustomLineBorderedButtonStyle(enableColor: Color.white,
                                           labelPadding: EdgeInsets(top: 8.0, leading: 16.0, bottom: 8.0, trailing: 16.0)))