How do I make an HStack of SwiftUI buttons have height?

Question

I have a simple SwiftUI row of buttons to mimic a keyboard layout. Just can't get the buttons to fill the height of the HStack. I can't tell where I need to give something height so it will look like a keyboard. No matter where I try to add height, the buttons still are small.

struct KeyboardView: View {
  let rows = [String.keyboardFKeyRow, String.keyboardNumKeyRow, String.alpha1KeyRow, String.alpha2KeyRow, String.alpha3KeyRow, String.arrowKeyRow]
  var body: some View {
    VStack() {
      KeyRow(labels: String.keyboardFKeyRow).frame(height: 100)
      KeyRow(labels: String.keyboardNumKeyRow).frame(height: 100)
      KeyRow(labels: String.alpha1KeyRow).frame(height: 100)
      KeyRow(labels: String.alpha2KeyRow).frame(height: 100)
      KeyRow(labels: String.alpha3KeyRow).frame(height: 100)
      KeyRow(labels: String.arrowKeyRow).frame(height: 100)
    }
  }
}

struct KeyRow: View {
  var labels: [String]
  
  var body: some View {
    HStack() {
      Spacer()
      ForEach(labels, id: \.self) { label in
        Button {
          print("Key Clicked")
        } label: {
          Text(label.capitalized)
            .font(.body)
            .frame(minWidth: 60, maxWidth: 80, minHeight: 80, maxHeight: .infinity)
        }
      }
      Spacer()
    }
  }
}

Does this answer your question? In SwiftUI, How do I increase the height of a button? — CPlus
– CPlus, Commented Sep 15, 2022 at 22:40
Rob's answer here is far more helpful than anything else I've seen on Stack Overflow, and countless other sites, for that matter. — se_puede_dev
– se_puede_dev, Commented Sep 15, 2022 at 23:43

rob mayoff · Accepted Answer · 2022-09-15 21:34:52Z

2

The .bordered button style on macOS has a hard-coded size and refuses to stretch vertically. If you need a different button height, either use the .borderless style or create your own ButtonStyle or PrimitiveButtonStyle, and (either way) draw the background yourself. For example, I got this result:

from this playground:

import PlaygroundSupport
import SwiftUI

PlaygroundPage.current.setLiveView(HStack {

    // Default button style, Text label.
    Button("a", action: {})
        .background { Rectangle().stroke(.mint.opacity(0.5), lineWidth: 1).clipped() }
        .frame(maxHeight: .infinity)

    // Default button style, vertically greedy Text label.
    Button(action: {}, label: {
        Text("b")
            .frame(maxHeight: .infinity)
    })
    .background { Rectangle().stroke(.mint.opacity(0.5), lineWidth: 1).clipped() }
    .frame(maxHeight: .infinity)

    Button(action: {}, label: {
        Text("c")
            .fixedSize()
            .padding()
            .frame(maxHeight: .infinity)
            .background {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color(nsColor: .controlColor))
            }
    }).buttonStyle(.borderless)
        .background { Rectangle().stroke(.mint.opacity(0.5), lineWidth: 1).clipped() }
        .frame(maxHeight: .infinity)

}
    .background { Rectangle().stroke(.red.opacity(0.5), lineWidth: 1).clipped() }
    .frame(height: 100)
)

answered Sep 15, 2022 at 21:34

rob mayoff

387k69 gold badges842 silver badges887 bronze badges

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

1 Comment

Andrew Li Over a year ago

The solution with borderless works well.

Collectives™ on Stack Overflow

How do I make an HStack of SwiftUI buttons have height?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related