当文本输入是多行时,我面临对齐问题。在此示例中,第一部分显示图像中正确显示的左侧和右侧文本。第二部分,它显示 3 到 4 行的文本,这会干扰右侧的对齐
我想让左边在多行中独立调整大小。右侧保持原样(之间没有间隙)2nd title
and 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
and 2nd Value
这是糟糕的用户体验)