Es más sencillo simplemente leer el código y ver el resultado final en la imagen. Mi pregunta es ¿por qué la fuerza de actuación y la fuerza de fondo no están alineadas con las vistas de texto que se encuentran sobre ellas? En la vista de texto de Actuation Force , parece haber un relleno misterioso agregado a su izquierda, mientras que Bottom-out Force no lo tiene.

 VStack { VStack { HStack { VStack(alignment: .leading, spacing: 5) { Text("**Pre-travel Distance**") Text("how far down the key must be pressed for it to actuate") } .frame(width: 250) .background(.red) SwitchPropertyCircularView(upperBoundValue: theSwitch.preTravelDistance!, unit: "mm") } .background(.blue) HStack { VStack(alignment: .leading, spacing: 5) { Text("**Total Travel Distance**") Text("how far down the key must be pressed for it to bottom out") } .frame(width: 250) .background(.red) SwitchPropertyCircularView(upperBoundValue: theSwitch.totalTravelDistance!, unit: "mm") } .background(.blue) } .frame(width: 380) .background(Color.gray) VStack { HStack { VStack(alignment: .leading, spacing: 5) { Text("**Actuation Force**") Text("the force needed to register a keypress") } .frame(width: 250) .background(.red) SwitchPropertyCircularView(upperBoundValue: Double(theSwitch.actuationForce!), unit: "gf") } .background(.blue) HStack { VStack(alignment: .leading, spacing: 5) { Text("**Bottom-out Force**") Text("the force needed for a switch to bottom out") } .frame(width: 250) .background(.red) SwitchPropertyCircularView(upperBoundValue: Double(theSwitch.bottomOutForce!), unit: "gf") } .background(.blue) } .frame(width: 380) .background(Color.gray) }