0

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.

Example

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"))
            }
        }
        
    }
}
joels
  • 6,153
  • 10
  • 47
  • 83
  • 1
    Does this answer your question https://stackoverflow.com/a/63997630/12299030? The demo was for iOS but code is platform-independent. – Asperi Dec 15 '20 at 18:42
  • PreferenceKey is the winner! Thanks. Do you want to add it as an answer? – joels Dec 15 '20 at 18:51

0 Answers0