当文本输入是多行时,我面临着对齐问题.在本例中,第一部分显示了图像中正确显示的左侧文本和右侧文本.第二部分,它以3到4行显示干扰右侧对齐的文本
我想让左边在多条生产线上独立做尺寸.右侧保持不变(在2nd title
和2nd Value
之间没有间隙).
我的观点代码:
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)
}
}
}
预期:
单行值或多行值.我不想显示标题和价值之间的差距.(图中第二部分的差距在2nd title
和2nd Value
之间,这是一个糟糕的用户体验)