Unwanted line wrapping behavior in the Text view of SwiftUI

37 views Asked by At

guys!

I found that (in SwiftUI) if a String contains the '-' character, and the '-' character is immediately followed by a non numeric character, then the string will break at the position of the '-' character(If there is not enough space)

As can be seen from the following figure, the String with blue background has a line break, while the String with gray background does not. Because the '-' character at the line break of the former is followed by a non numeric character (A), while the '-' character of the latter is followed by a numeric character (8)

enter image description here

Although the text fonts that display them are of equal width, their actual display widths are still different (the blue background String is shorter due to line breaking)

(If the '-' character in these Strings is replaced with other characters, line breaking will not occur.)

The test code is as follows:

let g_uuidString_1 = "474E34DD-3A83-456D-8182-8E298550BC93"
let g_uuidString_2 = "B2367045-EA26-455B-9D47-EB22D3593C5C"

struct ContentView: View {
    let uuidString_1 = UUID().uuidString
    let uuidString_2 = UUID().uuidString
    @State var width_1 = 0.0
    @State var width_2 = 0.0
    @State var fontSize = 15.0
    
    var body: some View {
        VStack {
            VStack(alignment: .leading) {
                //Text(uuidString_1)
                Text(g_uuidString_1)
                    .background(Color.gray.opacity(0.5))
                    .overlay(
                        GeometryReader { geo in
                            Color.clear.onAppear {
                                width_1 = geo.size.width
                            }
                        }.id(fontSize)
                    )
                    
                
                //Text(uuidString_2)
                Text(g_uuidString_2)
                    .background(Color.blue.opacity(0.5))
                    .overlay(
                        GeometryReader { geo in
                            Color.clear.onAppear {
                                width_2 = geo.size.width
                            }
                        }.id(fontSize)
                    )
                    
                    
            }
            .padding()
            // Use a constant width font(monospaced) to ensure that Strings 
            // with the same number of characters have the same display width
            .font(.system(size: fontSize, design: .monospaced))
            
            Spacer()
            
            Text("widths: \(width_1) | \(width_2)")
                .padding(.bottom)
                .font(.title2)
            
            Slider(value: $fontSize, in: 5.0...50.0)
                .padding(.top, 200)
                .padding()
        }
    }
}

#Preview {
    ContentView()
}

How can we ensure that (in UIKit or SwiftUI) the display width of the String generated by any UUID above is the same? Thanks! ;)

0

There are 0 answers