28

As you can see in the screenshot, the button height does not adjust to fit the text size, making it look ugly. How can I increase the hight of the buttons, so it does not look stupid. My question is, how do I increase the height of buttons in SwiftUI? I am trying to make the titlescreen of my Minecraft-like game.

struct ContentView: View { var body: some View { GeometryReader { geometry in VStack (spacing: 8) { Text("[Name not disclosed]Craft").font(.system(size: geometry.size.width/8)) Button(action: { }) { Text("Singleplayer").font(.system(size: geometry.size.width/20)) .frame(minWidth: geometry.size.width/2) } Button(action: { }) { Text("Multiplayer").font(.system(size: geometry.size.width/20)) .frame(minWidth: geometry.size.width/2) } HStack (spacing: 8) { Button(action: { }) { Text("Options").font(.system(size: geometry.size.width/20)) .frame(minWidth: (geometry.size.width/4)-16) } Button(action: { exit(EXIT_SUCCESS); }) { Text("Quit Game").font(.system(size: geometry.size.width/20)) .frame(minWidth: (geometry.size.width/4)-16) } } } } }

Not nicely looking window

Improve this question
2

4 Answers 4

Reset to default
33

You just need to set PlainButtonStyle and draw it as you wish...

Here is for example one of your button:

Button(action: { }) { Text("Singleplayer").font(.system(size: geometry.size.width/20)) .padding() .background(RoundedRectangle(cornerRadius: 8).fill(Color.blue)) .frame(minWidth: geometry.size.width/2) } .buttonStyle(PlainButtonStyle())

custom button

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

As noted above, the frame modifier should be before the background modifier otherwise the blue will not fill the whole frame
13

- For increasing the size of the clickable button:

You must increase the size of the label of the button instead of changing its frame:

Button { // Perform action here } label: { Text("Hello") .frame(width: 100, height: 100) // 👈 Increases size of the content }

- For holding the area, without being clickable:

Use the simpler initializer if you need only a title for your Button:

Button("Click me") { // Perform action here } .frame(width: 100, height: 100) // 👈 Increases visual size of the button, NOT its content! .background(Color.yellow)

Preview

Note that frame modifier must come before background to make it looks larger. Otherwise, you can't see the difference.

Improve this answer

1 Comment

Thanks a lot, you saved my day, your "Note that" part made a magic!
10

Please try below Code: 

Button(action: { //do action }) { Text("SIGN IN") .frame(width: 200 , height: 50, alignment: .center) //You need to change height & width as per your requirement } .background(Color.blue) .foregroundColor(Color.white) .cornerRadius(5)

Output enter image description here

Improve this answer

Comments

1

You need to change height of the stack

struct ContentView: View { @State private var arr = ["String"] var body: some View { GeometryReader { geometry in VStack (spacing: 8) { Text("[Name not disclosed]Craft").font(.system(size: geometry.size.width/8)) Button(action: { }) { Text("Singleplayer").font(.system(size: geometry.size.width/20)) .frame(minWidth: geometry.size.width/2) } Button(action: { }) { Text("Multiplayer").font(.system(size: geometry.size.width/20)) .frame(minWidth: geometry.size.width/2) } HStack (spacing: 8) { Button(action: { }) { Text("Options").font(.system(size: geometry.size.width/20)) .frame(minWidth: (geometry.size.width/4)-16) } Button(action: { exit(EXIT_SUCCESS); }) { Text("Quit Game").font(.system(size: geometry.size.width/20)) .frame(minWidth: (geometry.size.width/4)-16) } } .frame(width: 100, height: 100, alignment: .leading) .background(Color.red) } } } }
Improve this answer

1 Comment

What is geometry here ?