当文本输入是多行时,我面临着对齐问题.在本例中,第一部分显示了图像中正确显示的左侧文本和右侧文本.第二部分,它以3到4行显示干扰右侧对齐的文本

我想让左边在多条生产线上独立做尺寸.右侧保持不变(在2nd title2nd 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 title2nd Value之间,这是一个糟糕的用户体验)

推荐答案

Screenshot

 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()
    }
}

Ios相关问答推荐

在Android和iOS上从后台恢复应用程序后,inappwebview上出现白屏?

在SwiftUI中动态隐藏列表的空部分

如何让3张组合的`SF Symbol`图片围绕一个特定点旋转?

ios PWA从外部链接返回后降低了innerheight

在 SwiftUI 中以编程方式插入内嵌图像

如何将 Info.plist 文件添加到 Xcode for admob,错误 添加后会产生多个命令

当目标位于菜单标签内时,matchedGeometryEffect 的行为很奇怪

在 SwiftUI 中使用 .rotation3DEffect 在视图之间翻转

VStack 显示错误实例方法 'sheet(item:onDismiss:content:)' 要求 'Int' 符合 'Identifiable'

@Environment 的存在会导致列表在滚动时不断重建其内容

XCode 14 Beta 中 NavigationStack 的正文渲染问题

UIViewControllerRepresentable 在 Xcode 14 iOS 16 上崩溃

在 UICollectionView 上从右到左对齐

如何在 Objective-C 中组合两个数组?

Swift 中的日期到毫秒和回溯到日期

如何在 iOS 中获取正在运行的应用程序的名称

UIView 中的 safeAreaInsets 在 iPhone X 上为 0

如何使用 presentModalViewController 创建透明视图

请在您的 Podfile 中为此目标指定一个平台?

将 struct 保存到 UserDefaults