SwiftUI - Setting maxHeight does nothing for Text() inside LazyVGrid() - text

Question

I'm trying to make some buttons in a LazyVGrid, but for some reason when I do this, maxHeight has no effect:
LazyVGrid(columns: columns, alignment: .center, spacing: 16) {
ForEach(0...20, id: \.self) { index in
Button(action: {
buttonPressed(char: buttons[index])
}, label: {
Text(buttons[index])
.font(.system(size: 30))
.foregroundColor(Color.white)
.frame(maxWidth: 80, maxHeight: 80)
.background(RoundedRectangle(cornerRadius: 8).fill(getButtonColour(char: buttons[index])))
})
}
}
Here are the definitions to variables used in this snippet:
private let buttons = [buttons' text is here]
private let columns: [GridItem] = Array(repeating: GridItem(.flexible(minimum: 0, maximum: 80), spacing: 16), count: 4)
Outside of a LazyVGrid, .frame(maxWidth: 80, maxHeight: 8) takes effect and makes the element bigger, but for some reason, here it doesn't.
Any help would be welcome! Thank you.

Answer 1

You just need to set the idealHeight to 80 as well.
Text(buttons[index])
.font(.system(size: 30))
.foregroundColor(Color.white)
.frame(maxWidth: 80, idealHeight: 80, maxHeight: 80) // <- Here
.background(RoundedRectangle(cornerRadius: 8).fill(getButtonColour(char: buttons[index]).opacity(Double(index) / Double(buttons.count) + 0.1)))
Result (colors may look different because I don't have all the functions):
Additionally, in the screenshot you can see not all the characters are shown. You should change the range in the ForEach to 0 ..< buttons.count to fix this.