I’m facing an alignment issue when text input is multiple lines. In this example, the first section shows the left and right side text properly shown in the image. the second section, it shows text in 3 to 4 lines which disturb the alignment right side
I want to make the left make independently size during multiple lines. The right side remains as it is(no gap between 2nd title
and 2nd Value
).
Code of my view :
struct ContentView: View {
var body: some View {
Form {
Section {
Text("single line")
}
TwoLineView(firstTitle: "1st Title", fistValue: "Value",
secondTitle: "2nd Title", secondValue: "2nd Value")
TwoLineView(firstTitle: "1st Title", fistValue: "test",
secondTitle: "2nd Title", secondValue: "2nd Value")
Section {
Text("mutiple lines")
}
TwoLineView(firstTitle: "1st Title", fistValue: "This is long. This is long value. This is long value",
secondTitle: "2nd Title", secondValue: "2nd Value")
TwoLineView(firstTitle: "1st Title", fistValue: "test",
secondTitle: "2nd Title", secondValue: "2nd Value")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
}
struct TwoLineView: View{
var firstTitle: String
var fistValue: String
var secondTitle: String
var secondValue: String
var body: some View {
HStack(alignment: VerticalAlignment.center, spacing: 0) {
VStack(alignment: HorizontalAlignment.leading, spacing: 0) {
Text(firstTitle).lineLimit(1)
.font(.system(size: 30, weight: .heavy, design: .default))
Text(fistValue)
.frame(maxHeight: .infinity)
}
Spacer()
VStack(alignment: HorizontalAlignment.leading, spacing: 0) {
Text(secondTitle).lineLimit(1)
.font(.system(size: 30, weight: .heavy, design: .default))
Text(secondValue).lineLimit(1)
Spacer()
}
Spacer(minLength: 45)
}
}
}
Expected:
Single or multiple line values. I don’t want to display a gap between the title and value. (2nd section in the image has a gap between 2nd title
and 2nd Value
which is a bad UX experience)
2
Answers
Just remove the
frame
and addspacer
inVStack
.