SwiftUI 在左侧显示多行值并在堆栈右侧中断 alignment 时出现错误

Question

当文本输入为多行时，我遇到了 alignment 问题。 在此示例中，第一部分显示图像中正确显示的左侧和右侧文本。 第二部分，它显示 3 到 4 行的文本，这会干扰 alignment 右侧

我想让左边在多行中独立调整大小。 右侧保持原样（ 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)
        }
    }
}

预期：单行或多行值。 我不想显示标题和值之间的差距。 （图像中的第 2 部分在2nd title和2nd Value之间存在差距，这是一种糟糕的用户体验）

Answer 1

只需移除frame并在VStack中添加spacer即可。

         HStack(alignment: VerticalAlignment.center, spacing: 0) {
                    VStack(alignment: HorizontalAlignment.leading, spacing: 0) {
                        Text("1st Title ").lineLimit(1)
                            .font(.system(size: 30, weight: .heavy, design: .default))
                        
                        Text("This is long value. This is long value. This is long value")
                        
                            .frame(maxHeight: .infinity)
                    }
                    Spacer()
                    VStack(alignment: HorizontalAlignment.leading, spacing: 0) {
                        Text("2nd title").lineLimit(1)
                            .font(.system(size: 30, weight: .heavy, design: .default))
                        
                        Text("2nd Value").lineLimit(1)
                        Spacer() //here
                    //.frame(maxHeight: .infinity)
                    }
                    Spacer()
                }

Answer 2

只需移除框架并在 VStack 中添加垫片。

这解决了问题并显示了我需要的东西。 但是，一个问题是它在右下角的框中打破了 alignment

[![在此处输入图片描述][1]][1]

Answer 3

 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 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)
                Spacer() // add
            }
            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)
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}