Making button size bigger

I am new to Swift programming. To start with, I want to simply make a button as a Mac OS application. What I want to do are as follows. One is making the button size (the blue part) bigger. Two is to be able to click the blue part.

But I got the result like the image. I have no idea what I am going to do. So I would like you to help me. Thank you.

Answered by billh04 in 745616022

I am also learning SwiftUI. Here is my initial solution. The button needs a stoke outline which I did not handle since I am putting the button on a green background.

I am not sure if this is the best way to do it. It duplicates what I did in my Swift application so I did not spend more time on refining it.

It uses buttonStyle property since I have many buttons.

In my application, I named "MyButtonStyle" as "GameButtonStyle" since I am using it on a menu View for game actions.

struct ExampleView: View {

    var body: some View {
        ZStack {
            Color(red: 0, green: 0.5, blue: 0)
            VStack {
                Button("Button") {
                    print("tap button")
                }
                .buttonStyle(MyButtonStyle(labelWidth: 150, labelHeight: 30, scaleFactor: 1))
            }
        }
    }
}

struct MyButtonStyle: ButtonStyle {
    let labelWidth:CGFloat
    let labelHeight:CGFloat
    let scaleFactor:CGFloat
    let minWidth:CGFloat
    let verticalPadding:CGFloat

    init(labelWidth: CGFloat, labelHeight: CGFloat, scaleFactor: CGFloat, minWidth: CGFloat = 0, verticalPadding: CGFloat = 0) {
        self.labelWidth = labelWidth
        self.labelHeight = labelHeight
        self.scaleFactor = scaleFactor
        self.minWidth = minWidth
        self.verticalPadding = verticalPadding

    }

    func makeBody(configuration: Configuration) -> some View {
        let darkBlue = Color(red: 0, green: 0, blue: 1)
        configuration.label
            .frame(width: labelWidth, height: labelHeight)
            .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
            .font(Font.system(size: (7 * labelHeight) / 9))
            .frame(minWidth: minWidth)
            //.padding(.horizontal, 10)
            .padding(.vertical, verticalPadding)
            .foregroundColor(configuration.isPressed ? Color.white : Color.black)
            .background(configuration.isPressed ? darkBlue : Color.white)
            .cornerRadius(labelHeight)
    }
}

I am sorry, this was almost solved.

You could add a tap gesture:

        Button(action: {
            print ("tap buton")
        })
        {
            Text ("Button")
        }
        .padding()
        .frame (width: 250, height: 30)
        .background(.blue)
        .buttonStyle(.plain)
        .cornerRadius(10)
        .onTapGesture {
            print("Tapped in blue")
        }

Get more here: https://sarunw.com/posts/swiftui-button-background-color/?utm_content=cmp-true

Accepted Answer

I am also learning SwiftUI. Here is my initial solution. The button needs a stoke outline which I did not handle since I am putting the button on a green background.

I am not sure if this is the best way to do it. It duplicates what I did in my Swift application so I did not spend more time on refining it.

It uses buttonStyle property since I have many buttons.

In my application, I named "MyButtonStyle" as "GameButtonStyle" since I am using it on a menu View for game actions.

struct ExampleView: View {

    var body: some View {
        ZStack {
            Color(red: 0, green: 0.5, blue: 0)
            VStack {
                Button("Button") {
                    print("tap button")
                }
                .buttonStyle(MyButtonStyle(labelWidth: 150, labelHeight: 30, scaleFactor: 1))
            }
        }
    }
}

struct MyButtonStyle: ButtonStyle {
    let labelWidth:CGFloat
    let labelHeight:CGFloat
    let scaleFactor:CGFloat
    let minWidth:CGFloat
    let verticalPadding:CGFloat

    init(labelWidth: CGFloat, labelHeight: CGFloat, scaleFactor: CGFloat, minWidth: CGFloat = 0, verticalPadding: CGFloat = 0) {
        self.labelWidth = labelWidth
        self.labelHeight = labelHeight
        self.scaleFactor = scaleFactor
        self.minWidth = minWidth
        self.verticalPadding = verticalPadding

    }

    func makeBody(configuration: Configuration) -> some View {
        let darkBlue = Color(red: 0, green: 0, blue: 1)
        configuration.label
            .frame(width: labelWidth, height: labelHeight)
            .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
            .font(Font.system(size: (7 * labelHeight) / 9))
            .frame(minWidth: minWidth)
            //.padding(.horizontal, 10)
            .padding(.vertical, verticalPadding)
            .foregroundColor(configuration.isPressed ? Color.white : Color.black)
            .background(configuration.isPressed ? darkBlue : Color.white)
            .cornerRadius(labelHeight)
    }
}

Both answers could make my question solved and take me to the next step. I really thank you two.

Making button size bigger
 
 
Q