ios swiftUI多行文本未按预期在Vstack对齐中处理[重复]

qmelpv7a  于 2022-12-30  发布在  iOS
关注(0)|答案(1)|浏览(99)
    • 此问题在此处已有答案**:

SwiftUI bug when displaying multiple line value on left side and which breaks alignment on right side in stack(3个答案)
1分钟前关闭。
当文本输入为多行时,我遇到了对齐问题。在本例中,第一部分显示了图像中正确显示的左侧和右侧文本。第二部分显示了3到4行文本,干扰了右侧对齐
我想使左边的独立大小在多行。右边保持原样(没有差距之间的第二个标题和第二个价值)。
代码:-

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

预期:单行或多行值。我不希望在标题和值之间显示间隙。(图像中的第二部分在第二个标题和第二个值之间有间隙,这是糟糕的UX体验)
问题屏幕截图:-

3mpgtkmj

3mpgtkmj1#

请尝试以下代码:

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

相关问题