I'm working on an "Inspector" style view in SwiftUI for macOS. I'm having trouble figuring out a solution that doesn't involve hard coded dimensions.
You can see in the example that when I use fixed width labels, I have put each row in an HStack and everything lines up.
Alternatively, using VStacks for the columns, the baselines don't line up of course. How can I get the content of the adjacent VStacks to align by baseline to look more like the fixed width label example? Or is there another way to achieve this without hardcoded values?
struct ContentView: View {
@State var labelWidth: CGFloat = 100
var body: some View {
VStack {
GroupBox.init(label: Text("Fixed Width Labels:"), content: {
fixedWithHStacks
})
GroupBox.init(label: Text("Would prefer this:"), content: {
vStackColumns
})
}
}
/// This one works but I don't like the fixed label size
var fixedWithHStacks: some View {
VStack {
HStack {
Text("Label")
.frame(width: labelWidth, alignment: .trailing)
TextField("Label", text: .constant("Value 1"))
}
HStack {
Text("Longer Label 2")
.frame(width: labelWidth, alignment: .trailing)
TextField("Label 2", text: .constant("Value 2"))
}
}
}
/// This would be ideal but how to I get the "rows" to align by baseline?
var vStackColumns: some View {
HStack {
VStack(alignment: .trailing) {
Text("Label")
Text("Longer Label 2")
}
VStack {
TextField("Label", text: .constant("Value 1"))
TextField("Label 2", text: .constant("Value 2"))
}
}
}
}