Expand children of HStack equally? - swiftui

Question

I'm working on converting a little calculator app from UIKit to SwiftUI, because managing the autolayout constraints is getting insane. To that end, I'm trying to make a keypad with various keys grouped in the view hierarchy like this: The top row is an HStack, the number keys are their own view, a VStack of HStack, and then two more VStack (see code below).
Unfortunately, the rows below the top row don’t expand to the full width. I’ve tried a wide variety of .frame(maxWidth: .infinity, maxHeight: .infinity), but none seem to make that lower HStack expand fully horizontally.
I thought it might be because the number keys are their own view, but it does seem to get the heights consistent.
*Bonus points if you can tell me how to expand the "0" key to be twice the width of the "." key in that HStack.
struct
CalculatorView : View
{
var
body: some View
{
VStack(spacing: 0.0)
{
ResultsView()
Keypad()
}
}
}
struct
ResultsView : View
{
var
body: some View
{
ZStack
{
Color.black
}
}
}
struct
Keypad : View
{
var
body: some View
{
ZStack
{
// Color.green
VStack(spacing: 1.0)
{
HStack(spacing: 1.0)
{
Key("AC", action: {})
Key("(", action: {})
Key(")", action: {})
Key("\(Fractional.fractionDash)", action: {})
Key("±", action: {})
}
HStack(spacing: 1.0)
{
Numberpad()
VStack(spacing: 1.0)
{
Key("\(Fractional.fractionSlash)", action: {})
Key("mm", action: {})
Key("\"", action: {})
Key("DEL", action: {})
}
VStack(spacing: 1.0)
{
Key("÷", action: {}, backgroundColor: Color("OperatorButtonBackground"))
Key("×", action: {}, backgroundColor: Color("OperatorButtonBackground"))
Key("-", action: {}, backgroundColor: Color("OperatorButtonBackground"))
Key("+", action: {}, backgroundColor: Color("OperatorButtonBackground"))
}
.foregroundColor(.white)
}
.fixedSize(horizontal: false, vertical: false)
}
.background(Color.blue)
}
.foregroundColor(.black)
.font(Font.system(size: 30.0))
}
}
struct
Numberpad : View
{
var
body: some View
{
ZStack
{
VStack(spacing: 1.0)
{
HStack(spacing: 1.0)
{
Key("7", action: {})
Key("8", action: {})
Key("9", action: {})
}
HStack(spacing: 1.0)
{
Key("4", action: {})
Key("5", action: {})
Key("6", action: {})
}
HStack(spacing: 1.0)
{
Key("1", action: {})
Key("2", action: {})
Key("3", action: {})
}
HStack(spacing: 1.0)
{
Key("0", action: {})
Key(".", action: {})
}
}
}
.background(Color.red)
.foregroundColor(.black)
}
}
struct
Key : View
{
let text : String
let action : () -> ()
let backgroundColor : Color?
init(_ inText: String,
action inAction: #escaping () -> (),
backgroundColor inBC: Color? = nil)
{
self.text = inText
self.action = inAction
self.backgroundColor = inBC
}
var
body: some View
{
ZStack
{
Button(action: {})
{
Text(self.text)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(self.backgroundColor ?? Color.gray)
}
}
.aspectRatio(1.0, contentMode: .fit)
}
}

Answer 1

Approach
.fixedSize(horizontal:, vertical:)
https://developer.apple.com/documentation/swiftui/form/fixedsize(horizontal:vertical:)
Causes the view to grow in the axis marked as false (false means it can grow)
Solution:
Numberpad()
.fixedSize(horizontal: false, vertical: true)