Replacing SwiftUI Button with a custom Button - swiftui

Question

I would like to extend the SwiftUI.Button so that i can add a type prop and have that type change to different types of my theme buttons. But I am new to Swift and I can't figure out how to have my label and action props be generic.
In other words if i do this
import SwiftUI
struct Button: View {
var type: String = ""
var action = {}
var label = {
Text("Button")
}
var body: some View {
ZStack(content: {
SwiftUI.Button(action: action, label: label)
})
}
}
it limits the closure to only allow for label to return text()
how can this be done
also any suggestions on how i should to alter the "alterations" done to the button based on the type.
NOTE:
someone downvoted this because it is similar to button style query from another user however it is not.
that solution is for simply adding pre-made styles to the default SwiftUI.button struct and that's not my goal.
I'm attempting to extend SwiftUI.Button with a type property that can be passed and will set the styling based that input.
Although they share the same result they are not accomplishing the same goal. My solution will offer a dynamically styled component which can be used throughout the project. without the need of trailing .buttonStyle(BlueButtonStyle())

Answer 1

As I see you are trying re create apple Button, You can do like this, and then do your customisation in body:
struct Button<Content: View>: View {
let action: () -> Void
let label: () -> Content
init(action: #escaping () -> Void, #ViewBuilder label: #escaping () -> Content) {
self.action = action
self.label = label
}
init(action: #escaping () -> Void, title: String) where Content == Text {
self.init(action: action, label: { Text(title) })
}
var body: some View { label().onTapGesture { action() } }
}
use case:
Button(action: { print("hello") }, label: { Text("Button") })
Button(action: { print("hello") }, title: "Button")

Answer 2

The Conclusion of what swiftPunk put is the following.
struct Button<Content: View>: View {
let type: button_styles
let action: () -> Void
let label: () -> Content
enum button_styles {
case filled
case outlined
case plain
}
init(type: button_styles, action: #escaping () -> Void, #ViewBuilder label: #escaping () -> Content ) {
self.type = type
self.action = action
self.label = label
}
init(type: button_styles, action: #escaping () -> Void, title: String) where Content == Text {
self.init(type: type, action: action, label: { Text(title) })
}
init(action: #escaping () -> Void, title: String) where Content == Text {
self.init(type: .plain, action: action, label: { Text(title) })
}
init(action: #escaping () -> Void, #ViewBuilder label: #escaping () -> Content) {
self.init(type: .plain, action: action, label: label)
}
var body: some View {
switch type {
case .filled:
SwiftUI.Button(action: self.action, label: self.label).buttonStyle(FilledButtonStyle())
case .outlined:
SwiftUI.Button(action: self.action, label: self.label).buttonStyle(OutlinedButtonStyle())
case .plain:
SwiftUI.Button(action: self.action, label: self.label).buttonStyle(PlainButtonStyle())
}
}
}
struct FilledButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.font(.headline)
.frame(maxWidth: 108, maxHeight: 34, alignment: .center)
.contentShape(Rectangle())
.foregroundColor(configuration.isPressed ? Color.white.opacity(0.5) : Color.white)
.background(configuration.isPressed ? Color("Red").opacity(0.5) : Color("Red"))
.cornerRadius(20)
}
}
struct OutlinedButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.font(.headline)
.frame(maxWidth: 108, maxHeight: 34, alignment: .center)
.foregroundColor(Color("Grey"))
.background(Color.white.opacity(0))
.overlay(RoundedRectangle(cornerRadius:10).stroke(Color("Grey"), lineWidth: 2))
}
}
struct PlainButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.font(.headline)
.frame(maxWidth: 108, maxHeight: 34, alignment: .center)
.contentShape(Rectangle())
.foregroundColor(configuration.isPressed ? Color.white.opacity(0.5) : Color("Grey"))
}
}
which will allow you to use the Button Struct like:
Button(type: .outlined, action: { print("pressed") }, title: "Button")
or
Button(action: { print("pressed") }, title: "Button")
or
Button(action: addItem, label: {
Label("Add Item", systemImage: "plus")
})